I'm trying to retrofit a client site to be responsive and running into an issue with the navigation. I want the horizontal menu to collapse when smaller and appear on-click but having issue getting the click to work. Below is the live site and I've also included the css. What am I overlooking?
http://www.aircompressors.com/ /* =Menu -------------------------------------------------------------- */ #primary-navigation { background: #005E9B; display: block; float: left; margin: 0 auto; width:100%; max-width: 940px; } #primary-navigation .menu-main-navigation-container, .menu { font-size: 14px; margin-left: 50px; max-width: 928px; } #primary-navigation .menu-main-navigation-container ul, .menu ul { list-style: none; margin: 0; } #primary-navigation .menu-main-navigation-container li, .menu li { float: left; position: relative; } /*Style 'show menu' label button and hide it by default*/ .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #005E9B; text-align: center; padding: 10px 0; display: none; } #primary-navigation a { color: #fff; display: block; line-height: 38px; padding: 0 10px; text-decoration: none; } #primary-navigation ul ul { box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; top: 38px; left: 0; float: left; width: 180px; z-index: 99999; } #primary-navigation ul ul li { min-width: 180px; } #primary-navigation ul ul ul { left: 100%; top: 0; } #primary-navigation ul ul a { background: #005e9b; line-height: 1em; padding: 10px; width: 160px; height: auto; } #primary-navigation li:hover > a, #primary-navigation ul ul :hover > a { background: #A82B44; color: #fff; } #primary-navigation ul li:hover > ul { display: block; } #primary-navigation ul li.current_page_item > a, #primary-navigation ul li.current-menu-ancestor > a, #primary-navigation ul li.current-menu-item > a, #primary-navigation ul li.current-menu-parent > a { color: #fff; } * html #primary-navigation ul li.current_page_item a, * html #primary-navigation ul li.current-menu-ancestor a, * html #primary-navigation ul li.current-menu-item a, * html #primary-navigation ul li.current-menu-parent a, * html #primary-navigation ul li a:hover { color: #fff; } /*Hide checkbox*/ input[type=checkbox]{ display: none; } /*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ #menu{ display: block; } @media screen and (max-width : 870px){ /*Make dropdown links appear inline*/ #primary-navigation .menu-main-navigation-container ul, .menu ul { position: static; display: none; } /*Create vertical spacing*/ #primary-navigation .menu-main-navigation-container li, .menu li { margin-bottom: 1px; } /*Make all menu links full width*/ #primary-navigation .menu-main-navigation-container li, .menu li, #primary-navigation a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display:block; } } ______________________________________________________________________ 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/