How to design hamburger menu-links in a responsive navbar?

Question

I am trying to design my hamburger menu-links but can not find the correct way to do it.

The example I am looking at: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

I think the problem is that I have added ul class="headerlinks" to design the full screen menu. Does anyone have a solution?

I want to display it like in w3schools example:

Here is my code

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += "responsive"; } else { x.className = "topnav"; } } 

 .topnav { background-color: white; width: 100%; position:absolute; overflow: hidden; border-bottom: 1px solid; border-bottom-color: #e8ebef; height: 120px; } .topnav a { float: left; display: block; color: #4d4d4f; text-align: center; padding: 10px 30px; text-decoration: none; font-size: 17px; margin-top: 10px; } .topnav a:active{ color: #bed017; } .topnav a:hover { background-color: #f2f2f2; } .topnav .icon { display: none; } .headerlinks{ margin-left: 25%; margin-top: 1.5%; } @media screen and (max-width: 1100px) { .topnav a{display: none;} .topnav a.icon { float: right; display: block; } .circle { display: none; } .signInbtn { display: block !important; } } @media screen and (max-width: 1100px) { .topnav.responsive {position: relative;} .topnav.responsive.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } 

 <div class="topnav" id="myTopnav"> <img class="headerlogo" src=""></img> <ul class="headerlinks"> <a href="#home">Hem</a> <a href="#">test</a> <a href="#newcustomer">Ny kund</a> <a href="javascript:void(0);" style="font-size:20px;" class="icon" onclick="myFunction()">&#9776;</a> </ul> <ul> <li class="headerLogIn"> <a><button class="circle" onclick="document.getElementById('id01').style.display='block'">LOGGAIN</button></a> </li> </ul> </div> 

Answer 1

You have got a typo in the function where you append the responsive class names (You have missed adding a space before the 'responsive' class name). Your function should be :

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

So, the line :

x.className += "responsive";

should be:

x.className += " responsive";

Adding that space should fix the issue. Hope this helps. Thanks.