Doubleshot_84 Posted March 27, 2015 Share Posted March 27, 2015 (edited) The menu bar links are active even when the menu bar is closed. I know the problem has to be in the javascript. I don't know javascript, how do you turn off the nav when the menu bar isn't open? I attached sample code so you can see the problem yourself. $(document).ready(function(){ /* Hamburger Menu */ $('.hamburger').on('click', function(e){ e.preventDefault(); $(this).toggleClass('opned'); $('header nav').toggleClass('active'); }); sample code.zip Edited March 27, 2015 by Doubleshot_84 Link to comment Share on other sites More sharing options...
thescientist Posted March 27, 2015 Share Posted March 27, 2015 Do you have a default state (.inactive class) already applied by default? Link to comment Share on other sites More sharing options...
Doubleshot_84 Posted March 27, 2015 Author Share Posted March 27, 2015 I edited my original post and attached sample code. Now I'm thinking the problem is in the CSS. @media (max-width:800px){ header a.hamburger{ display: block;} header nav{ position: absolute; opacity: 0; width: 95%; top: 95px; right: auto; left: auto; height:auto; float: center; z-index: 20; overflow: hidden; background: #fff; border-top: 5px solid #bfd9f2; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);} header nav.active{ opacity: 1;} header nav ul{ display: block; width: 100%; text-align: center; margin-top: 0;} header nav a{ text-decoration: none; text-align: center; display: inline; color:#808080; list-style: none;} header nav ul li a{ display: block; padding: 25px 0; border-bottom: 1px solid #f2f3f3; transition: background .2s linear; -webkit-transition: background .2s linear; -moz-transition: background .2s linear; -o-transition: background .2s linear;} header nav ul li a:active{ background: #f2f3f3;} header nav ul li a,{ color: #1c3655;}} Link to comment Share on other sites More sharing options...
thescientist Posted March 27, 2015 Share Posted March 27, 2015 To clarify, is this issue happening on page load too, or are the links only showing as active after you click to close the hamburger menu. Link to comment Share on other sites More sharing options...
Doubleshot_84 Posted March 27, 2015 Author Share Posted March 27, 2015 The links are showing as active even before I open the hamburger menu, after I close the hamburger menu. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now