Navbar Text Color.

[Tyler Devine]

I put this code into my custom.css in my theme and it hasn't changed the color of the text.

.navbar-inverse {
    background-color: #0094ff;
}

// Navbar link color
.navbar-inverse .navbar-nav>li>a, 
.navbar-inverse .navbar-text {
    color: #FFFFFF;
}

// Navbar link color - hover/focus
.navbar-inverse .navbar-nav>li>a:focus, 
.navbar-inverse .navbar-nav>li>a:hover {
    color: #000000;    
    background-color: transparent;
}

 

[redit]

Hello Tyler,

Which theme are you using as I have changed the 'six' theme myself and I have not changed the 'navbar-inverse' style.

All I have had to change is the following for the 'navbar'

.navbar-main {
    margin-bottom: 0;
    background-color: #000000;
    border: 0;
    min-height: 38px;
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: #000;
    background-color: red;
}
.navbar-main li.account {
    background-color: #000000;
}
.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #000000;
}

 

[Tyler Devine]

I have her simplicity theme by impressive themes

[WHMCS Lawrence]

Hello,

I generally suggest using a browser plugin like Firebug, then hover over the element in question and right click on it and select the option to inspect it. That usually permits temporary CSS changes in the browser itself so you can see what you need to change when you edit your custom CSS file.

[Tyler Devine]

They don't have firebug extensions anymore on there website getfirebug.com it says Firefox.

[WHMCS Lawrence]

Apologies for any confusion. I use an older version of Firefox with that extension already installed. They recommend the Firefox Developer Edition now it seems, which appears to have the same type of functionality.

[Tyler Devine]

I have that installed how do I use it if you know.

[redit]

Hi @Tyler Devine to use the Developer Tools, all you need to do is right click on the section of your page that you want to change (in this case the navbar) and select 'Inspect Element (Q)' from the drop down.

This will then open the Developer Tools panel.

In this panel just locate the section that you are editing and locate the CSS section under the 'Rules' option you can then make changes to each of these elements on the fly as you need.

Then just copy what you have edited to the 'custom.css' and reload the page as you make the changes.

My advise is do an element at a time otherwise you can get lost and confused.