Jump to content

menu still active when menu bar isn't open.


Recommended Posts

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.

I attached sample code so you guys can see the issue for yourself.
@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;}}

sample code.zip

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...