I'm reworking a client site navigation to work better responsively and using a previous site as a model. I think I have the page code and css code correct, but I'm not getting the correct results. In short, the menu is collapsing when the screen is smaller but the link isn't toggling the menu, and I can't figure out why. Here are links:
the site I'm working on: http://ipegstl.com/commercial/ the site I'm trying to mimic: http://otpnet.com/ here's the css code that works the button link for the toggling: /*Style 'show menu' label button and hide it by default*/ .show-menu { font-family: 'gandhi_sansbold'; text-decoration: none; color: #fff; background:#af292e; text-align: center; padding: 10px 0; display: none; } /*Hide checkbox*/ input[type=checkbox]{ display: none; -webkit-appearance: none; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ .menu-menu-1-container #menu-menu-1 { display: block; } @media only screen and (max-width : 1000px) { /*Make dropdown links appear inline*/ #site-navigation ul { position: static; display: none; } /*Create vertical spacing*/ #site-navigation li { margin-bottom: 1px; } /*Make all menu links full width*/ #site-navigation ul li { width: 100%; } #site-navigation li a { width: 100%; background:#af292e; } /*Display 'show menu' link*/ .show-menu { display:block; } } What am I overlooking? ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
