Jump to content

Doubleshot_84

Members
  • Posts

    4
  • Joined

  • Last visited

About Doubleshot_84

  • Birthday 09/20/1984

Previous Fields

  • Languages
    English

Profile Information

  • Gender
    Male
  • Location
    New Jersey
  • Interests
    Graphic Designing, mst3k, knitting

Doubleshot_84's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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
  2. The links are showing as active even before I open the hamburger menu, after I close the hamburger menu.
  3. 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;}}
  4. 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
×
×
  • Create New...