sticky responsive mobile hamburger menu wont display

Question

I have a sticky responsive mobile hamburger menu and if I'm at the top of the page I have to click twice for it to push down the text under it and then it opens. When I'm scrolling and stop somewhere midpage and try to open it then entire topnav bar vanishes and comes back again when I start scrolling but it never expands showing the other links.

 <script> function responsive() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> <script> // When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()}; // Get the myTopnav var myTopnav = document.getElementById("myTopnav"); // Get the offset position of the myTopnav var sticky = myTopnav.offsetTop; // Add the sticky class to the myTopnav when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset >= sticky) { myTopnav.classList.add("sticky") } else { myTopnav.classList.remove("sticky"); } } </script> 

 .sticky { position: fixed; top: 0; width: 100%; z-index: 5; } .topnav { background-color: #005E7B ; overflow: hidden; z-index: 5; font-weight: bold; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 0.875em 1em; text-decoration: none; font-size: 1.0625em; } /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* Dropdown container - needed to position the dropdown content */ .dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 1.0625em; border: none; outline: none; color: white; padding: 0.875em 1em; background-color: inherit; font-family: inherit; margin: 0; } /* Style the dropdown content (hidden by default) */ .dropdown-content { display: none; position: fixed; background-color: #f9f9f9; min-width: 10em; box-shadow: 0px 0.5em 1em 0px rgba(0,0,0,0.2); z-index: 1; font-weight: normal; } /* Style the links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 0.75em 1em; text-decoration: none; display: block; text-align: left; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } .topnav.responsive { position: fixed; display: block; width:100%; z-index:999; } .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } 

 <nav> <div class="topnav" id="myTopnav"> <a href="#about">About me</a> <div class="dropdown"> <div class="dropbtn">Example </div> <div class="dropdown-content"> <a href="#Example">Example</a> <a href="#Example">Example</a> <a href="#Example">Example</a> <a href="#Example">Example</a> <a href="#Example">Example</a> </div> </div> <a href="#Example">Example</a> <a href="#about">Example</a> <a href="#about">Example</a> <a href="javascript:void(0);" class="icon" onclick="responsive()">&#9776;</a> </div> </nav> 

Answer 1

All of your HTML, CSS, and JS was correct, you just had a minor mistake in your responsive() function where you were toggling the .responsive class on your nav incorrectly, which I fixed below:

 function responsive() { var x = document.getElementById("myTopnav"); x.classList.toggle('responsive'); } // When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()}; // Get the myTopnav var myTopnav = document.getElementById("myTopnav"); // Get the offset position of the myTopnav var sticky = myTopnav.offsetTop; // Add the sticky class to the myTopnav when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset >= sticky) { myTopnav.classList.add("sticky") } else { myTopnav.classList.remove("sticky"); } } 

 body { /* added long height to body so that it's scrollable */ height: 800px; } .sticky { position: fixed; top: 0; width: 100%; z-index: 5; } .topnav { background-color: #005E7B ; overflow: hidden; z-index: 5; font-weight: bold; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 0.875em 1em; text-decoration: none; font-size: 1.0625em; } /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* Dropdown container - needed to position the dropdown content */ .dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 1.0625em; border: none; outline: none; color: white; padding: 0.875em 1em; background-color: inherit; font-family: inherit; margin: 0; } /* Style the dropdown content (hidden by default) */ .dropdown-content { display: none; position: fixed; background-color: #f9f9f9; min-width: 10em; box-shadow: 0px 0.5em 1em 0px rgba(0,0,0,0.2); z-index: 1; font-weight: normal; } /* Style the links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 0.75em 1em; text-decoration: none; display: block; text-align: left; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } .topnav.responsive { position: fixed; display: block; width:100%; z-index:999; } .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown { float: none; } .topnav.responsive .dropdown-content { position: relative; } .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } 

 <nav> <div class="topnav" id="myTopnav"> <a href="#about">About me</a> <div class="dropdown"> <div class="dropbtn">Example </div> <div class="dropdown-content"> <a href="#Example">Example</a> <a href="#Example">Example</a> <a href="#Example">Example</a> <a href="#Example">Example</a> <a href="#Example">Example</a> </div> </div> <a href="#Example">Example</a> <a href="#about">Example</a> <a href="#about">Example</a> <a class="icon" onclick="responsive()">&#9776;</a> </div> </nav>