Title: Responsive Navbar - Element doesn't disappear upon resize
Tags: javascript;html;css;responsive-design;navigationbar
Question: On this page that I have been fiddling with, I have made a makeshift responsive navigation menu, when the window is made smaller, it's replaced with a standard menu button and a dropdown menu. 

Trouble is, when I resize it back up again, the dropdown menu stays visible over the top of the original navigation.

I have tried using media queries and they didn't work. I did try jquery but the issue I had was that once the box was given the property "display:none" by the jquery, then the javascript for the button to reveal the dropdown ceased to work

Here is a reduced down version of the code I am working with...



```function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.hamburger')) {

    var dropdowns = document.getElementsByClassName("contents");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}```
```/* header */
   
   .header {
     background:#fff;
     width:100%;
     height:170px;
     top:0;
     position:fixed;
     z-index:9999;
     white-space:nowrap;
     clear:both;
     transition:all 0.25s ease;
     border-bottom:1px solid;
   }
   
   
  
   }
   
   
    .navbar {
    margin-top:130px;
    list-style-type: none;
                text-align: center;
                padding: 0px 0;
    color:#000;
    display:inline-block;
    

            }
   
   .navbar ul li {
                display: inline-block;
                margin-right: 0px;
            color:#000 ;
            }
   
   
   .navbar ul li a {
                text-decoration: none;
                /* text-transform: uppercase; */
                color:#000 ;
    padding: 12px 12px;
                font-family: century gothic;
    text-align: center;
    display: block;
 
            }
   
    .navbar ul li:last-child {
                margin-right: 0;
            }
   
   .navbar ul li a.active {
                text-decoration: none;
              /*  text-transform: uppercase; */
                color: #b1f73d;
    padding: 12px 12px;
                font-family: century gothic;
    text-align: center;
    display: block;
    bottom:0px;
            }
   
   
   .nav_a a {
    display: block;
    color: #000;
    text-align: center;
    padding: 12px 12px;
    text-decoration: none;
    font-family: century gothic;
   }
   
   
   .nav_a a:hover {
    color:#b1f73d;
   }
   
   .nav_a a.active:hover {
    color:#b1f73d;
   }
   
   .hdr-bnr {font-family:century gothic;font-weight:lighter;color:#000;font-size:1.25em;}
   
   
   
   
@media (min-width:1046px) and (max-width:9999999999px) {
   
   .hamburger {
    display:none;
    }
   
   .dropdown {
    display:none;
   }

}
   



@media (max-width: 1045px) {
 
   .header {
    background:#fff;
    width:100%;
    height:110px;
    top:0;
    position:fixed;
    z-index:9999;
    white-space:nowrap;
    clear:both;
   }
    
   
   
   .navbar {
    display:none;
    }
    
   
   .hamburger {
    display:block;
   }
   
  
}





/* burger */

.hamburger {
    background-color: #FFF;
    color: #00811f;
    padding: 14px;
    font-size: 3.5em;
    border: 1px;
    cursor: pointer;
 float:right;
 margin-right:5%;
  display:none
 border-radius:5px;
}

.hamburger:hover, .hamburger:focus {
    background-color: #FFF;
 color:#000;
}

.dropdown {
    position: relative;
    display: block;

}

.contents {
 margin-top:110px;
 font-family:century gothic;
    display: none;
 font-size:125%;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow: auto;
 
    z-index: 1;
 
 
 
}


.contents a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
 
}

.dropdown a:hover {background-color: #00811f; }

.show {display:block; }```
```<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"&gt;</script&gt;
  


<div class="header"&gt;


<nav class="navbar"&gt;
            <ul&gt;
                <li class="nav_a"&gt;<a class="active" href="javascript:void(0)"&gt;Home</a&gt;</li&gt;
                <li class="nav_a"&gt;<a href="#"&gt;page2</a&gt;</li&gt;
                <li class="nav_a"&gt;<a href="#"&gt;page3</a&gt;</li&gt;
                <li class="nav_a"&gt;<a href="#"&gt;page4</a&gt;</li&gt;
                <li class="nav_a"&gt;<a href="#"&gt;page5</a&gt;</li&gt;
    
   </ul&gt;
   
</nav&gt;
     
<button onclick="myFunction()" class="hamburger"&gt;☰</button&gt;
  <span class="dropdown"&gt;
    <div id="myDropdown" class="contents"&gt;
     <a href="#"&gt;Home</a&gt;
     <a href="#"&gt;page2</a&gt;
     <a href="#"&gt;page3</a&gt;
     <a href="#"&gt;page4</a&gt;
     <a href="#"&gt;page5</a&gt;
  
    </div&gt;
  </span&gt;
  
</div&gt;

<p style="color:#000;margin-top:200px;"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p&gt;```




Apologies I tried to cut out as much bulk as possible, can someone please tell me what I'm doing wrong?

Thanks!

Comment: If you were to click the hamburger button to reveal the dropdown menu, and then resize the window, you will notice that the dropdown menu still stays there even though I have defined it in the media query to 'display:none'.

Comment: Your hamburger button is behaving like you defined it in your CSS: it will only disappear once the width of the screen is >1370. Unless I'm confused about what you want to achieve, this is just a case of defining your media query width correctly..

Comment: I have added the explanation and solution to your problem below.

Here is the accepted answer: ok, since you told us the following in the comments:

```
  If you were to click the hamburger button to reveal the dropdown menu, and then resize the window, you will notice that the dropdown menu still stays there even though I have defined it in the media query to 'display:none'.
```

This is (as far as I know) totally correct behaviour, the reason being the following:

When you click the 'hamburger' button, this click will toggle the class='show' for your menu dropdown. In this case a click on the hamburger button will change this code:

```<div id="myDropdown" class="contents"&gt;
    <a href="#"&gt;Home</a&gt;
    <a href="#"&gt;page2</a&gt;
    <a href="#"&gt;page3</a&gt;
    <a href="#"&gt;page4</a&gt;
    <a href="#"&gt;page5</a&gt;
</div&gt;
```

to this: (adds or deleted the class='show'; depending if you are opening or closing the menu)

```<div id="myDropdown" class="contents show"&gt;   <---- Adds or removes show class
    <a href="#"&gt;Home</a&gt;
    <a href="#"&gt;page2</a&gt;
    <a href="#"&gt;page3</a&gt;
    <a href="#"&gt;page4</a&gt;
    <a href="#"&gt;page5</a&gt;
</div&gt;
```

So since you are only setting the visibility of the hamburger button to 'display:none', the dropdown still keeps the class='show'.
In the end, you are just making the button invisible, but not the the dropdown menu.

You can simply solve your problem by changing

```@media (min-width:1046px) and (max-width:9999999999px) {
        .dropdown {
            display:none;
        }
}
```

to be 

```@media (min-width:1046px) and (max-width:9999999999px) {
        .dropdown .show { <--- specify that you don't want to show the dropdown if it has the class='show'
            display:none;
        }
}
```

(You can also achieve this with jQuery if prefered, by adding or removing the 'show' class from the dropdown; or by triggering the 'toggle' function for the dropdown)
I hope it helps



```function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.hamburger')) {

    var dropdowns = document.getElementsByClassName("contents");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}```
```/* header */
   
   .header {
     background:#fff;
     width:100%;
     height:170px;
     top:0;
     position:fixed;
     z-index:9999;
     white-space:nowrap;
     clear:both;
     transition:all 0.25s ease;
     border-bottom:1px solid;
   }
   
   
  
   }
   
   
    .navbar {
    margin-top:130px;
    list-style-type: none;
                text-align: center;
                padding: 0px 0;
    color:#000;
    display:inline-block;
    

            }
   
   .navbar ul li {
                display: inline-block;
                margin-right: 0px;
            color:#000 ;
            }
   
   
   .navbar ul li a {
                text-decoration: none;
                /* text-transform: uppercase; */
                color:#000 ;
    padding: 12px 12px;
                font-family: century gothic;
    text-align: center;
    display: block;
 
            }
   
    .navbar ul li:last-child {
                margin-right: 0;
            }
   
   .navbar ul li a.active {
                text-decoration: none;
              /*  text-transform: uppercase; */
                color: #b1f73d;
    padding: 12px 12px;
                font-family: century gothic;
    text-align: center;
    display: block;
    bottom:0px;
            }
   
   
   .nav_a a {
    display: block;
    color: #000;
    text-align: center;
    padding: 12px 12px;
    text-decoration: none;
    font-family: century gothic;
   }
   
   
   .nav_a a:hover {
    color:#b1f73d;
   }
   
   .nav_a a.active:hover {
    color:#b1f73d;
   }
   
   .hdr-bnr {font-family:century gothic;font-weight:lighter;color:#000;font-size:1.25em;}
   
   
   
   
@media (min-width:1046px) and (max-width:9999999999px) {
   
   .hamburger {
    display:none;
    }
   
   .dropdown .show {
    display:none;
   }

}
   



@media (max-width: 1045px) {
 
   .header {
    background:#fff;
    width:100%;
    height:110px;
    top:0;
    position:fixed;
    z-index:9999;
    white-space:nowrap;
    clear:both;
   }
    
   
   
   .navbar {
    display:none;
    }
    
   
   .hamburger {
    display:block;
   }
   
  
}





/* burger */

.hamburger {
    background-color: #FFF;
    color: #00811f;
    padding: 14px;
    font-size: 3.5em;
    border: 1px;
    cursor: pointer;
 float:right;
 margin-right:5%;
  display:none
 border-radius:5px;
}

.hamburger:hover, .hamburger:focus {
    background-color: #FFF;
 color:#000;
}

.dropdown {
    position: relative;
    display: block;

}

.contents {
 margin-top:110px;
 font-family:century gothic;
    display: none;
 font-size:125%;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow: auto;
 
    z-index: 1;
 
 
 
}


.contents a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
 
}

.dropdown a:hover {background-color: #00811f; }

.show {display:block; }```
```<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"&gt;</script&gt;
  


<div class="header"&gt;


<nav class="navbar"&gt;
            <ul&gt;
                <li class="nav_a"&gt;<a class="active" href="javascript:void(0)"&gt;Home</a&gt;</li&gt;
                <li class="nav_a"&gt;<a href="#"&gt;page2</a&gt;</li&gt;
                <li class="nav_a"&gt;<a href="#"&gt;page3</a&gt;</li&gt;
                <li class="nav_a"&gt;<a href="#"&gt;page4</a&gt;</li&gt;
                <li class="nav_a"&gt;<a href="#"&gt;page5</a&gt;</li&gt;
    
   </ul&gt;
   
</nav&gt;
     
<button onclick="myFunction()" class="hamburger"&gt;☰</button&gt;
  <span class="dropdown"&gt;
    <div id="myDropdown" class="contents"&gt;
     <a href="#"&gt;Home</a&gt;
     <a href="#"&gt;page2</a&gt;
     <a href="#"&gt;page3</a&gt;
     <a href="#"&gt;page4</a&gt;
     <a href="#"&gt;page5</a&gt;
  
    </div&gt;
  </span&gt;
  
</div&gt;

<p style="color:#000;margin-top:200px;"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p&gt;```




Comment for this answer: Works great, although I would have liked the menu itself to close if that were possible so that if it were to be resized back down it wouldn't automatically pop up without being clicked again (haven't written that very well), but this works, thank you for your help Kevin!


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:05/22/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><css><responsive-design><navigationbar>', 'Title': "Responsive Navbar - Element doesn't disappear upon resize", 'ViewCount': 488, 'id': 44113528, 'user_AboutMe': '', 'user_AccountId': 10412345.0, 'user_DisplayName': 'gin_noc', 'user_Reputation': 15.0, 'user_Views': 3.0, 'user_id': 7677389.0}}