I've spent the entire day trying to find a solution and experimenting with various methods, but I'm still unable to get it to work. The navbar-toggle (hamburger menu) shows up when the window is resized, but clicking on the button doesn't display the menu. What's even more bothersome is that the menu background is open by default when the page loads.
One important thing to note is that I am not including the bootstrap.css file in the header because I prefer to customize my components directly in style.css. Do I need to include bootstrap.css and make modifications within it for it to function correctly, or can I simply select specific elements from bootstrap.css and paste them into style.css?
Here is the HTML code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a class="navbar-brand page-scroll" href="#page-top"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" >
<ul class="nav navbar-nav" >
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href=".contact">CONTACT</a>
</li>
<li>
<a class="page-scroll" href=".recommendations">ABOUT</a>
</li>
<li>
<a class="page-scroll" href=".work">WORK</a>
</li>
</ul>
</div>
</div>
</nav>
All scripts are located at the bottom of the body section
<!-- JQUERY -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
And here is the CSS code:
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{
display: block;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
background-color: #08293C;
}
.navbar-fixed-top{
top: 0;
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.container {
margin-right: auto;
margin-left: auto;
width: 500px;
}
(Additional CSS content...)