-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Doubleshot_84
-
-
The links are showing as active even before I open the hamburger menu, after I close the hamburger menu.
-
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;}}
-
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'); });
menu still active when menu bar isn't open.
in CSS
Posted
I'm working on a responsive website. One part of it is the navigation bar turning into a hamburger menu bar once the page decreases to 800px. Which is working wonderfully.
The issue that I'm having is that once the navigation bar turns into the hamburger menu, the links in the drop down menu are hidden put still active and clickable links. The Css is from the responsive.css file. I'm completely self taught, and at my wits in. I hope someone out there can point me in the right direction.
sample code.zip