• Locked
No replies
Sun, 2021-01-17 22:32
Linda_A
Linda_A's picture
Offline
newbie
Last seen: 2 years 19 weeks ago
Timezone: GMT+1
Joined: 2021-01-17
Posts: 1
Points: 2

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, it would be much appreciated.

Example of the menu: https://www.hippoiathanatoi.com/

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;
}

Top
Tags: