I have been trying to change the background color etc on a nav-bar. Found an example of elsewhere
Change navbar color in Twitter Bootstrap 3
so I copied it and changed the colors, my css looks like this:
.navbar-actions {
background-color:#0099cc;
color:#ff6600;
border-radius:0;
}
.navbar-actions .navbar-nav > li > a {
color:#ff6600;
}
.navbar-actions .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
color: #ff6600;
background-color:transparent;
}
.navbar-actions .navbar-brand {
color:#ff6600;
}
my code works fine if I use navbar-default it collapse correctly and displays the button to expand. When I switch to navbar-actions the navigator has no color and when it collapse there is no expand button. Here is the code for my navigator:
<nav class='navbar navbar-actions'>
<div class="container-fluid">
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse'
data-target='#viewNavbar'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<div class='hidden-sm hidden-md hidden-lg'>
<a class="navbar-brand">Actions</a>
</div>
</div><!-- navbar-header -->
<div class='collapse navbar-collapse' id='viewNavbar'>
<ul class="nav nav-pills">
<li role="presentation">
Action One
</li>
<li role='presentation'>
Action Two
</li>
<li role='presentation'>
Action Three
</li>
</ul>
</div><!-- collapse -->
</div><!-- container -->
</nav>
I’m just really getting into the Bootstrap formatting so any help will be appreciated.
2
Answers
Are there any issues when you simply override the .navbar-default class in this case?
(Instead of using navbar-actions)
Here’s what I use for overriding the navbar in my weathersite