Having an issue with changing the background color on a navbar.
Question
I am currently working on a band page and having issues with the navbar. I want the navbar to be black to match the logo of the band, but can't seem to change the background color despite trying it with all of the relevant classes on my css page.
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index_thekatellas.html">
<img src="katellas.jpg">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><a href="tour_thekatellas.html">Tour Dates</a></li>
<li><a href="band_thekatellas.html">Band</a></li>
<li><a href="music_thekatellas.html">Music</a></li>
</ul>
</nav>
1 answers
solution1
0
You should use
<nav class="navbar navbar-inverse">
It will look your nav bar black.
default is white so inverse is black.
<!DOCTYPE html> <html lang="en"> <head> <title>My exam</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <div class="container"> <h3>Inverted Navbar</h3> <p>An inverted navbar is black instead of gray.</p> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Changing background color of navbar
I used Bootstrap 4 for a navbar. I can't change the background-color of the wrapping div element
Bootstrap navbar background color not changing
navbar changing background color with jQuery
Avoid fixed height issue related to Bootstrap Navbar. (Mega Menu)
HTML - Background-color not changing for navbar
HTML navbar not changing background color upon hover
Changing navbar background color on scroll not working
Bootstrap 5 navbar not changing background color on scroll?
Changing Collapsed navbar list background color
Related Tags