Hey there! I'm currently diving into the world of responsive design and I'm attempting to create a navigation bar that transforms into a menu when viewed on a mobile device or phone. Everything seems to be working fine, except that not all the navigation items are showing up on the mobile device and I'm scratching my head trying to figure out why! Here's the snippet of code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> <a href="#">RONNIE<b>GURR</b></a></li>
<section class="div_navbar_items">
<li class="navbar_items"> <a href="#home">HOME</a> </li>
<li class="navbar_items"> <a href="#about_me">ABOUT US</a> </li>
<li class="navbar_items"> <a href="#skills">GALLERY</a> </li>
<li class="navbar_items"> <a href="#projects">SHOP</a> </li>
<li class="navbar_items"> <a href="#contact">CONTACT</a> </li>
</section>
<li class="icon">
<a href="#" onclick="navBarFunction()"> ☰</a>
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Below is the snippet from the CSS file:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
... (CSS continues)
And here's the JS function for the responsiveness:</p>
<pre><code>function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
If you want to check out the code in action, head over to this CodePen link: https://codepen.io/anon/pen/JyEoWY