Jump to content
Tyler Devine

Navbar Text Color.

Recommended Posts

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;
}

 

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

784817806_Screenshotfrom2018-07-1211-45-57.thumb.png.01de8d2b7c1162cf70233e36f6a415cb.png

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.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

By using this site, you agree to our Terms of Use & Guidelines