I recently customized a bootstrap navbar by changing the color, background-color, and hover color. However, after making these modifications, I noticed that the navbar is no longer fixed in place. Despite my limited knowledge of CSS, I tried to find a solution online, but most suggestions involve swapping "navbar-static" to "navbar-fixed," which I have already done in my code. Can someone please offer assistance?
Below are the relevant snippets of CSS and HTML:
.navbar-custom {
z-index:999999; /* Fixed issue where collapsed navbar displayed underneath slider */
position: absolute;
background-color: #E46142;
}
.section1 .navbar-custom .container #navbar-collapse .nav.navbar-nav li a{
color: white; /* Targeted text specifically to change color */
}
.section1 .navbar-custom .container .navbar-header .navbar-brand{
color: white;
}
.section1 .navbar.navbar-custom.navbar-fixed-top .container .navbar-header .navbar-toggle .icon-bar{
background-color: white;
}
ul.nav a:hover { color: #000 !important; }<div class="section1">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Name</a>
</div><!-- End Nav Bar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
<li><a href="#">Text4</a></li>
<li><a href="#">Text5</a></li>
</ul>
</div>
</div><!-- End Container -->
</nav>
<!-- End Nav Bar -->
</div>