CODEWITHSUNDEEP
javascriptjqueryhtmlcssdebugging
SShine2
SShine2

Reputation: 65

Bug in nav bar?

Something's going wrong with my menu and I can't figure out why. When I test my code in responsive view it works fine at first when it switches from the hamburger icon to the horizontal nav bar, BUT... if I click the hamburger icon first ( once to drop down the menu and a second time to close it) and then resize the screen, my horizontal nav menu disappears.

Here's the code linked in Codepen. Just go to Full View and try those steps and see what you think! Thank you!!

http://codepen.io/sshine2/pen/VbjGaE

 <!DOCTYPE html>

 <html lang="en">

 <head>
 <meta charset="utf-8">
 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">google.load("jquery", "1.3.2");</script>
 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

 <style>
body {
 font-family: 'Noto Sans', sans-serif;
 margin: 0;
 width: 100%;
 height: 100vh;
 background: #ffffff;
 background-color: black;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
  }

header {
 width: 100%;
 background: #ffffff;
 position: fixed;
 height: 4em;
 line-height: 4em;
 display: inline-block;
 padding-left: 1em;
 border-bottom: .1em solid #dddddd;
  }
h2 {
 font-size: 2.1em;
  }
p {
 font-size: 10em;
 color: white;
 padding-top: 1em;
  }

@media only screen and (min-width: 319px) {

 .menu {
    z-index: 1;
    display: none;
    font-weight: bold;
    font-size: 1.2em;
    width: 100%;
    background: #f1f1f1;
    position: fixed;
    text-align: center;
    margin-top: 3.3em;
    color: black;
  }

  .menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    border-top: #dddddd 1px solid;
  }   

  .menu li {
    display: block;
    padding: 1em 0 1em 0;
    border-bottom: #dddddd 1px solid;
  }

  .menu li:hover {
    display: block;
    background: #585858;
    padding: 1em 0 1em 0;
      cursor: crosshair;
  }

  .menu ul li a {
    text-decoration: none;
    margin: 0px;
    color: black;
  }

  .menu ul li a:hover {
    color: white;
    text-decoration: none;
  }

  .menu a {
    text-decoration: none;
    color: black;
  }

  .menu a:hover {
    text-decoration: none;
    color: white;
  }

  #nav-icon4 {
    width: 35px;
    height: 25px;
    float: right;
    margin-top: -47px;
    margin-right: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: cell;
  }

  #nav-icon4 span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: darkred;
    border-radius: 7px;
    opacity: 2;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

  #nav-icon4 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  #nav-icon4 span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  #nav-icon4 span:nth-child(3) {
    top: 20px;
     -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  #nav-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    left: 6px;
  }

  #nav-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  #nav-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 25px;
    left: 6px;
  }   
  }


@media only screen and (min-width : 768px) {   
     h2 {
      z-index: 1000000;
      font-size: 1.5em;
      }

        p {
            font-size: 20em;
            color: white;
            padding-top: 1em;
  }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
  }

  li {
    float: right;
    margin-left: 20px;
    margin-right: 8px;
    margin-top: -10px;
}

li a {
    display: block;
    text-align: center;
    text-decoration: none;
}


.menu {
    display: block;
    position: absolute;
    right: 0px;
    font-size: .9em;
    width: 100%;
    padding-right: 15px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 0);
    }
.menu ul {
    border-bottom: 0;
    border-top: 0;
    }
.menu li {
    border-bottom: 0;
    border-top: 0;
    }
 .menu li:hover {
    cursor: crosshair;
    padding-top: 1em;
    padding-bottom: .4em;
    padding-right: 0em;
    padding-left: 0em;
   }

.menu ul li a:hover {
  color: white;
}

#nav-icon4 {
    display: none;
    }
}

@media only screen and (min-width : 922px) {
    li {
    margin-left: 55px;
    margin-right: 18px;

    }
.menu {
    padding-right: 1px;
    }
}


@media only screen and (min-width : 1400px) {
    header {
       height: 5em;
      line-height: 5em;
    }
    h2 {
        font-size: 2.6em;    
    }
    li {
    margin-left: 55px;
    margin-right: 30px;
    }
    .menu {
        padding-right: 1px;
        font-size: 1.2em;
    }
}

    </style>

 <title>hamburgers</title>
 </head>

 <body>
     <header>

      <span>Shine Design</span>
      <div id="nav-icon4">
       <span></span>
       <span></span>
       <span></span>
      </div>

     </header>

     <div class="menu">
      <ul>
       <a href="#">
        <li>LINK ONE</li>
       </a>
       <a href="#">
        <li>LINK TWO</li>
       </a>
       <a href="#">
        <li>LINK THREE</li>
       </a>
       <a href="#">
        <li>LINK FOUR</li>
       </a>
       <a href="#">
        <li>LINK FIVE</li>
       </a>
      </ul>
     </div>

   </body>
    <script>
    $(document).ready(function(){
      $('#nav-icon4').click(function(){
        $(this).toggleClass('open');
      });
    });
    </script>
  </html>

Upvotes: 0

Views: 62

Answers (4)

Sahil Dhir
Sahil Dhir

Reputation: 4250

I have created a short example of things need to be done. Added some jquery codes to make it work the way you want .

Step 1 - Add class hide-nav on window width

      /* logic For window width */
  if ($(window).width() > 768) {
  //  $('.menu').addClass('hide-nav');
    $('.menu').addClass('show-nav');
  } else {
    $('.menu').removeClass('hide-nav');
  }

Step 2 - Add class hide-nav on window resize

      function resize() {
    if ($(window).width() < 768) {
      $('.menu').addClass('hide-nav');
      $('.menu').removeClass('show-nav');
    }
  else {

    $('.menu').addClass('show-nav');
}
  }

  $(window).resize(resize)
    .trigger('resize');


$(document).ready(function() {
  $('#nav-icon4').click(function() {
    $(this).toggleClass('open');
    $(".menu").slideToggle("slow");
  });

  /* logic For window width */
  if ($(window).width() > 768) {
    //  $('.menu').addClass('hide-nav');
    $('.menu').addClass('show-nav');
  } else {
    $('.menu').removeClass('hide-nav');
  }
});

function resize() {
  if ($(window).width() < 768) {
    $('.menu').addClass('hide-nav');
    $('.menu').removeClass('show-nav');
  } else {

    $('.menu').addClass('show-nav');
  }
}

$(window).resize(resize)
  .trigger('resize');
body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  background-color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  width: 100%;
  background: #ffffff;
  position: fixed;
  height: 4em;
  line-height: 1.5em;
  display: inline-block;
  padding-left: 1em;
  border-bottom: .1em solid #dddddd;
}

h2 {
  font-size: 2.1em;
}

p {
  font-size: 10em;
  color: white;
  padding-top: 1em;
}

@media only screen and (min-width: 319px) {
  .menu {
    z-index: 1;
    display: none;
    font-weight: bold;
    font-size: 1.2em;
    width: 100%;
    background: #f1f1f1;
    position: fixed;
    text-align: center;
    margin-top: 3.3em;
    color: black;
  }
  .menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    border-top: #dddddd 1px solid;
  }
  .menu li {
    display: block;
    padding: 1em 0 1em 0;
    border-bottom: #dddddd 1px solid;
  }
  .menu li:hover {
    display: block;
    background: #585858;
    padding: 1em 0 1em 0;
    cursor: crosshair;
  }
  .menu ul li a {
    text-decoration: none;
    margin: 0px;
    color: black;
  }
  .menu ul li a:hover {
    color: white;
    text-decoration: none;
  }
  .menu a {
    text-decoration: none;
    color: black;
  }
  .menu a:hover {
    text-decoration: none;
    color: white;
  }
  #nav-icon4 {
    width: 35px;
    height: 25px;
    float: right;
    margin-top: -60px;
    margin-right: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: cell;
  }
  #nav-icon4 span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: darkred;
    border-radius: 7px;
    opacity: 2;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  #nav-icon4 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  #nav-icon4 span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  #nav-icon4 span:nth-child(3) {
    top: 20px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  #nav-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    left: 6px;
  }
  #nav-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }
  #nav-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 25px;
    left: 6px;
  }
}


/* Break at Devices such as Tablets, Desktops */

@media only screen and (min-width: 768px) {
  h2 {
    z-index: 1000000;
    font-size: 1.5em;
  }
  p {
    font-size: 20em;
    color: white;
    padding-top: 1em;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  li {
    float: right;
    margin-left: 20px;
    margin-right: 8px;
    margin-top: -10px;
  }
  li a {
    display: block;
    text-align: center;
    text-decoration: none;
  }
  .menu {
    display: block;
    position: absolute;
    right: 0px;
    font-size: .9em;
    width: 100%;
    padding-right: 15px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 0);
  }
  .menu ul {
    border-bottom: 0;
    border-top: 0;
  }
  .menu li {
    border-bottom: 0;
    border-top: 0;
  }
  .menu li:hover {
    cursor: crosshair;
    padding-top: 1em;
    padding-bottom: .4em;
    padding-right: 0em;
    padding-left: 0em;
  }
  .menu ul li a:hover {
    color: white;
  }
  #nav-icon4 {
    display: none;
  }
}


/* Medium Devices, Desktops */

@media only screen and (min-width: 922px) {
  li {
    margin-left: 55px;
    margin-right: 18px;
  }
  .menu {
    padding-right: 1px;
  }
}


/* Large Devices, Wide Screens */

@media only screen and (min-width: 1400px) {
  header {
    height: 5em;
    line-height: 5em;
  }
  h2 {
    font-size: 2.6em;
  }
  li {
    margin-left: 55px;
    margin-right: 30px;
  }
  .menu {
    padding-right: 1px;
    font-size: 1.2em;
  }
}

.show-nav {
  display: block !important;
}

.hide-nav {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="reset.css">

  <link rel="stylesheet" href="hamburgers.css">

  <script src="http://www.google.com/jsapi" type="text/javascript"></script>

  <script type="text/javascript">
    google.load("jquery", "1.3.2");
  </script>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  <script type="text/javascript" src="ham.js"></script>

  <title>hamburgers</title>

</head>

<body>


  <header>
    <h2><span>Shine Design</span></h2>
    <div id="nav-icon4">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </header>

  <div class="menu" id="menuExpand">
    <ul>
      <a href="#">
        <li>LINK ONE</li>
      </a>
      <a href="#">
        <li>LINK TWO</li>
      </a>
      <a href="#">
        <li>LINK THREE</li>
      </a>
      <a href="#">
        <li>LINK FOUR</li>
      </a>
      <a href="#">
        <li>LINK FIVE</li>
      </a>
    </ul>
  </div>

  <main>
  </main>
</body>

</html>

Upvotes: 0

Chiller
Chiller

Reputation: 9738

the function slideToggle() toggles the display property and it add it into the element style of the menu which makes it more priority than using class

so to resolve the issue add important to display:block; in the media screen min-width : 768px; 

@media only screen and (min-width : 768px) {
   .....
   .menu {
    display: block!important;
     .....
   }
}

See updated codepen

Upvotes: 1

Johnny John
Johnny John

Reputation: 384

Put a display : block !important; in the .menu, the function slideToggle() will put a style display:none inline in the element .menu, so when you come back to the high resolution, .menu still display: none

Upvotes: 1

manish jadhav
manish jadhav

Reputation: 15

Use jquery and js at the end or before tag

 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">google.load("jquery", "1.3.2");</script>
 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

use this

 <!DOCTYPE html>

 <html lang="en">

 <head>
 <meta charset="utf-8">
<style>
body {
 font-family: 'Noto Sans', sans-serif;
 margin: 0;
 width: 100%;
 height: 100vh;
 background: #ffffff;
 background-color: black;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
  }

header {
 width: 100%;
 background: #ffffff;
 position: fixed;
 height: 4em;
 line-height: 4em;
 display: inline-block;
 padding-left: 1em;
 border-bottom: .1em solid #dddddd;
  }
h2 {
 font-size: 2.1em;
  }
p {
 font-size: 10em;
 color: white;
 padding-top: 1em;
  }

@media only screen and (min-width: 319px) {

 .menu {
    z-index: 1;
    display: none;
    font-weight: bold;
    font-size: 1.2em;
    width: 100%;
    background: #f1f1f1;
    position: fixed;
    text-align: center;
    margin-top: 3.3em;
    color: black;
  }

  .menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    border-top: #dddddd 1px solid;
  }   

  .menu li {
    display: block;
    padding: 1em 0 1em 0;
    border-bottom: #dddddd 1px solid;
  }

  .menu li:hover {
    display: block;
    background: #585858;
    padding: 1em 0 1em 0;
      cursor: crosshair;
  }

  .menu ul li a {
    text-decoration: none;
    margin: 0px;
    color: black;
  }

  .menu ul li a:hover {
    color: white;
    text-decoration: none;
  }

  .menu a {
    text-decoration: none;
    color: black;
  }

  .menu a:hover {
    text-decoration: none;
    color: white;
  }

  #nav-icon4 {
    width: 35px;
    height: 25px;
    float: right;
    margin-top: -47px;
    margin-right: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: cell;
  }

  #nav-icon4 span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: darkred;
    border-radius: 7px;
    opacity: 2;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

  #nav-icon4 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  #nav-icon4 span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  #nav-icon4 span:nth-child(3) {
    top: 20px;
     -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  #nav-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    left: 6px;
  }

  #nav-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  #nav-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 25px;
    left: 6px;
  }   
  }


@media only screen and (min-width : 768px) {   
     h2 {
      z-index: 1000000;
      font-size: 1.5em;
      }

        p {
            font-size: 20em;
            color: white;
            padding-top: 1em;
  }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
  }

  li {
    float: right;
    margin-left: 20px;
    margin-right: 8px;
    margin-top: -10px;
}

li a {
    display: block;
    text-align: center;
    text-decoration: none;
}


.menu {
    display: block;
    position: absolute;
    right: 0px;
    font-size: .9em;
    width: 100%;
    padding-right: 15px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 0);
    }
.menu ul {
    border-bottom: 0;
    border-top: 0;
    }
.menu li {
    border-bottom: 0;
    border-top: 0;
    }
 .menu li:hover {
    cursor: crosshair;
    padding-top: 1em;
    padding-bottom: .4em;
    padding-right: 0em;
    padding-left: 0em;
   }

.menu ul li a:hover {
  color: white;
}

#nav-icon4 {
    display: none;
    }
}

@media only screen and (min-width : 922px) {
    li {
    margin-left: 55px;
    margin-right: 18px;

    }
.menu {
    padding-right: 1px;
    }
}


@media only screen and (min-width : 1400px) {
    header {
       height: 5em;
      line-height: 5em;
    }
    h2 {
        font-size: 2.6em;    
    }
    li {
    margin-left: 55px;
    margin-right: 30px;
    }
    .menu {
        padding-right: 1px;
        font-size: 1.2em;
    }
}

    </style>

 <title>hamburgers</title>
 </head>

 <body>
     <header>

      <span>Shine Design</span>
      <div id="nav-icon4">
       <span></span>
       <span></span>
       <span></span>
      </div>

     </header>

     <div class="menu">
      <ul>
       <a href="#">
        <li>LINK ONE</li>
       </a>
       <a href="#">
        <li>LINK TWO</li>
       </a>
       <a href="#">
        <li>LINK THREE</li>
       </a>
       <a href="#">
        <li>LINK FOUR</li>
       </a>
       <a href="#">
        <li>LINK FIVE</li>
       </a>
      </ul>
     </div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">google.load("jquery", "1.3.2");</script>
 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   </body>
    <script>
    $(document).ready(function(){
      $('#nav-icon4').click(function(){
        $(this).toggleClass('open');
      });
    });
    </script>
  </html>

Upvotes: 0

Related Questions