My navbar is not displaying the ul bars when I click on the button to open them in mobile view. Here's what currently happens:
https://i.sstatic.net/fFIzM.png
What I actually want it to look like is this:
https://i.sstatic.net/a8fSK.jpg
However, with the bars positioned below the navbar instead of above it.
Below is the code snippet for the HTML:
<nav id="nav">
<span class="brand">Brand Name</span>
<ul>
<li><a href="about.html">About <i class="fa fa-angle-down"></i></a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<a class="nav-bars"><i class="fa fa-bars"></i></a>
</nav>
Here is the SCSS code for the navbar styling:
/*----------------
Navbar Styles
----------------*/
.nav_fixed {
position: fixed;
top: -($info_bar_height / 4);
z-index: 100;
}
nav {
height: $navbar_height;
width: 100%;
margin: 0;
color: $navbar_color;
background: $navbar_background_color;
font-weight: bold;
letter-spacing: 0.025em;
line-height: $navbar_height;
text-transform: uppercase;
/* Rest of the SCSS styles... */
}
/* Responsive Styles */
/* JS Code */
Lastly, here is the JS code snippet provided:
$(function() {
// JavaScript code...
});