I am struggling to make my current CSS and HTML menu fully responsive and mobile-friendly. I have researched solutions from other sources but have been unable to implement them successfully. I am seeking help in modifying my menu so that it adjusts to smaller screens by collapsing into a mobile-friendly button for expanded navigation.
I am hoping someone can provide me with the specific code needed, including the correct class names. I have attempted to adapt existing solutions without success. While there are tools available to generate code for me, I prefer to keep the desktop version of my menu unchanged and simply optimize it for smaller screens.
It is important to me that the solution only involves HTML5 and CSS3, with the code being added to my index.php file and CSS stylesheet.
From my index page:
<!-- NAV-BAR-START -->
<div id="navbar"><div id='cssmenu'>
<ul>
<li><a href='/?p=home'><span>Home</span></a></li>
<li class='has-sub'><a href='/?p=gallery'><span>Gallery</span></a>
<ul>
<li><a href='/?p=photos'><span>Photos</span></a></li>
<li><a href='/?p=videos'><span>Videos</span></a></li>
<li><a href='/?p=audio'><span>Audio</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='/?p=ian-milne'><span>Ian Milne</span></a>
<ul>
<li><a href='/?p=about'><span>About Ian</span></a></li>
<li><a href='/?p=testimonials'><span>Testimonials</span></a></li>
<li class='last'><a href='/?p=location'><span>Location</span></a></li>
</ul>
</li>
<li><a href='/?p=events'><span>Events</span></a></li>
<li><a href='/?p=bookings'><span>Bookings</span></a></li>
<li class='last'><a href='/?p=contact'><span>Contact</span></a></li>
< /ul>
</div></div>
<!-- NAV-BAR-END -->
Associated CSS:
/* CSS DROPDOWN MENU */
#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: auto;
text-align:center;
}
#cssmenu ul {
background: #000dfa;
height: 50px;
list-style: none;
margin: 0;
padding: 0;
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
-webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
}
#cssmenu li {
float: none;
padding: 0px 0px 0px 15px;
display: inline-block;
}
#cssmenu li a {
color: #ffffff;
display: block;
font-weight: normal;
line-height: 50px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu li a:hover {
background: #000894;
color: #ff8400;
text-decoration: none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}
#cssmenu ul li:hover a {
background: #000894;
color: #ff8400;
text-decoration: none;
}
#cssmenu li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px;
z-index: 200;
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px;
background: #000dfa;
/*this is where the rounded corners for the dropdown disappears*/
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 50px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover a {
border: 0px;
color: #ff8400;
text-decoration: none;
background: #000894;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}
I have also created a JSFiddle link for reference.