Responsive Mobile Menu not expanding - html

Question

I have added a responsive menu to a blog developed on CodeIgnitor. FYI, someone else made this blog.
Everything is working fine but the menu is not expanding in mobile device while clicking on the icon to expand the menu.
function myMenuFunction() {
var x = document.getElementById("nav");
if (x.className === "navMenuCustom") {
x.className += " responsive";
} else {
x.className = "navMenuCustom";
}
}
.navMenuCustom {
background-color: #333;
overflow: hidden;
font-weight: 900;
}
.navMenuCustom a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
padding: 8px 16px;
}
.navMenuCustom a:hover {
background-color: #ddd;
color: black;
}
.navMenuCustom a:active {
background-color: #4CAF50;
color: white;
}
.navMenuCustom .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navMenuCustom a:not(:first-child) {
display: none;
}
.navMenuCustom a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.navMenuCustom.responsive {
position: relative;
}
.navMenuCustom.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navMenuCustom.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="nav" class="navMenuCustom">
Learn Guitar Fast
Teach Yourself Guitar
How to Buy a Guitar
String Ninja
Easy Guitar Songs
Contact
Blog
<a href="javascript:void(0);" class="icon" onclick="myMenuFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
I have used w3schools tutorial to add responsive menu. Link to w3schools tutorial.
You can also check the live website here.

Answer 1

The reason your menu does not work is because you have "overflow: hidden".
Overflow hidden causes the other element's to not show up, this because they will appear underneath the parent div.
When your page is on mobile size you have to remove the "overflow: hidden" so that the other menu items can show up.
#media only screen and (max-width: 600px){
.navMenuCustom {
overflow: auto;
}
}
I would also give the a attributes a background-color.
.navMenuCustom a {
background-color: #444;
}
The only problem that is left is that your image has an higher z-index than your menu items, so it will appear above it.
You can fix this problem with the following code:
Add higher index on the element you want to appear on top.
#nav {
z-index: 10
}
#slideshow-main-homepage div img {
z-index: 9;
}

Answer 2

It works, but .navMenuCustom has overflow: hidden, so you do not see it.
Quick fix would be to add overflow: visible to the .navMenuCustom.responsive. But you will still see nothing, because the items have transparent background and light font color. You must set background-color to the .navMenuCustom.responsive a as well. Last problem will be that the header image will appear over the navigation. You can fix that by removing all the position: relative attributes of its elements (I counted three of them: #banner-home, #slideshow-main-homepage and <div style="...">), but I am not sure if it cannot broke anything else. You must test it a little bit.

Answer 3

It's because you declared height with !important in your #nav, I recommed removing it or use the code below.
#media screen and (max-width: 600px) {
#nav {
height: auto !important;
}
}