Changing the Default settings on a BootStrap nav-bar

Question

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.

score 1 · Answer 1 · answered Mar 05 '16 at 21:37

1

Are there any issues when you simply override the .navbar-default class in this case?

(Instead of using navbar-actions)

answered Mar 05 '16 at 21:37

Not entirely sure what you mean by that, could you give a for instance? – Bill F Mar 05 '16 at 21:54
If the navbar-default class is working, continue to use
instead, and within your CSS file, write the style properties you want ex/ `.navbar-default { background-color:#0099cc; color:#ff6600; border-radius:0; }` . However, make sure that your stylesheet / style tag comes after wherever you link bootstrap.
– Mar 05 '16 at 22:16
I modified my css and added your example (deleted the other stuff just to be sure) The the navbar displays with the default background and other formatting. – Bill F Mar 05 '16 at 22:40
And you're linking your stylesheet _after_ the bootstrap style sheet? – Mar 06 '16 at 00:26
Yes this is in XPages and using the Bootstrap theme so Bootstrap is loaded automatically as a part of the page, I have modified other Bootstrap stuff using the same css. – Bill F Mar 06 '16 at 00:29
@Cdok : Try rephrasing your answer, so it actually sounds like an answer and not like a question. Answers that are intended as an answer but sound like a question are frowned upon, here at SO, and likely to get many downvotes and/or to get deleted. – John Slegers Mar 06 '16 at 15:35

score 1 · Accepted Answer · answered Mar 06 '16 at 02:57

.navbar-weather {
    background-color: #336699; 
    color:#eee; 
    border-radius:0;
}

.navbar-weather .navbar-nav > li > a {
    color:#dcdcdc; 
    padding-left:20px;
    padding-right:20px;
}

.navbar-weather .navbar-nav > .active > a, .navbar-nav > .active >      a:hover, .navbar-nav > .active > a:focus {
    color: #B0C4DE; 
    background-color: transparent;
}

.navbar-weather .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    color: #000; 
    background-color: #B0C4DE; 
}

.navbar-weather .navbar-brand {
    color :#eee; 
}

.navbar-weather .navbar-toggle {
    color: #eee 
    background-color: transparent; 
}

.navbar-weather .icon-bar {
    background-color: #dcdcdc; 
}

Here's what I use for overriding the navbar in my weathersite

This seems to have done it but don't see why my original one would not work. any way it is doing what I want so I'll move on. Thanks — Bill F, Mar 06 '16 at 15:15

Changing the Default settings on a BootStrap nav-bar

2 Answers2