Converting existing menu to hamburger for mobile

[Linda_A]

After adding a few more navigation links to my menu, I need to be able to collapse it into a hamburger menu on smaller displays. I had a fair bit of help putting it together in the first place, so I don’t understand all the bits and pieces fully, which has made it difficult to know what to change for the collapsed version. If anyone could provide some pointers about how I should tackle it, it would be much appreciated.

HTML

<div id="TopNavBar">
<nav id="TopNavWrap">
<ul class="TopNavMain">
<li><a href="https://www.hippoiathanatoi.com/">Home</a></li>
<li><a href="https://www.hippoiathanatoi.com/Blog/">Blog</a></li>
<li><a href="https://www.hippoiathanatoi.com/Logs/">Logs</a></li>
<li><a href="https://www.hippoiathanatoi.com/Gallery/">Gallery</a></li>
<li><a href="https://www.hippoiathanatoi.com/Reviews/">Reviews</a></li>
<li><a href="#">Elsewhere</a>
<ul class="TopNavSub">
<li><a href="https://www.hippoiathanatoi.com/Otherworldly/">Otherworldly</a></li>
<li><a href="https://www.westeros.org/">Westeros</a></li>
</ul>
</li>
</ul>
</nav>
</div>

CSS

#TopNavBar { 
position:fixed; 
top:0;
width:100%; 
z-index:1001;
}
 
#TopNavWrap {
background: #CC5C46;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
height:2em;
z-index:1002;
text-align:center;
}
 
ul.TopNavMain {
list-style: none;
position: relative;
display: inline-table;
margin:0;
padding:5px 0 0 0;
text-align:center;
}
 
ul.TopNavMain:after {
content: ""; clear: both; display: block;
}
 
ul.TopNavMain li {
float: left;
font: 120% 'Uncial Antiqua', serif; 
}
 
ul.TopNavMain li:hover {
}
 
ul.TopNavMain li:hover > ul {
display: block;
}
 
ul.TopNavMain li a {
display: block; 
padding: 0px 10px;
color:#F1D9B3;  
text-decoration: none;
}
 
ul.TopNavMain li a:hover {
color:#F4E1C4;
text-decoration:underline;
}
 
ul.TopNavMain ul {
display: none;
background: #000000;
margin:0;
padding: 0;
position: absolute; 
top: 100%;
white-space:nowrap;
}
 
ul.TopNavMain ul li {
float: none; 
font: 90% 'Alegreya SC', serif; 
position: relative;
text-align:left;
}
 
ul.TopNavMain ul li a {
padding: 10px 10px 10px 10px;
color:#F1D9B3;
text-decoration: none;
}	
 
ul.TopNavMain ul li a:hover {
color:#F4E1C4;
text-decoration:underline;
}

[PaulOB]

Hi,

I’ve quickly added the basics you need to the following codepen.

It’s just a rough guide and the styling is up to you but you should be able to see how the components work together.

The menu is hidden with a media query at the same time the hamburger is shown. The js adds a click event listener to the hamburger and opens the menu when clicked. It does this by adding a class of open to a parent and that class can then control all the hiding and showing that’s needed.

[Linda_A]

Hi Paul,

Thank you so much, that is just what I needed to see how this works. Much appreciated!

[Linda_A]

I seem to have something on the site that conflicts with it. I installed the code as-is to test before doing any styling changes, and the menu does not appear to open when the hamburger is clicked.

In action: https://www.hippoiathanatoi.com/

[coothead]

Hi there Linda_A,

move your scripts from the head section
to just above the closing </body> tag.

coothead

[Linda_A]

Thank you, coothead! Did not realise it would be affected by that, but I see why now.