Member Avatar for rouse

I am using twitter boostrap for a conversion project that I am workng on. I need to change the color of the Nav-bar, the links color, hover color of the links and finally the default size of the text of the links. Can you point me to a tutorial to make those changes, and if not a collection of the selectors in the CSS file to adjust.
Thanks

  • 5 Contributors
  • 9 Replies
  • 183 Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by bootstraptor

Dani AI

Generated

Good point from and : the browser inspector is the fastest way to find where Bootstrap is setting the hover rule. In Chrome DevTools the Elements panel can force a :hover state (right‑click the element → Force state → :hover), which immediately reveals the exact selector and source file that control the hover color. That usually clears up whether the hover is coming from a simple link rule, an .active-scoped rule, or a more specific stylesheet.

Common reasons the hover color is hard to locate or change:

  • Bootstrap often applies separate rules for normal, focus, hover and “active” states; the active selector can override hover.
  • The navbar visual may come from a gradient or background image, so changing color alone won’t always produce the visible effect.
  • Specificity and load order matter: a later or more specific rule will win.

Practical troubleshooting and maintenance approach:

  • Force the :hover state in DevTools and check the Styles and Computed panes to see the winning declaration and its source file/line.
  • Put overrides in a custom stylesheet that is loaded after Bootstrap, or give the navbar a scoped custom class to increase specificity for only that component.
  • If a gradient/background-image is involved, reset background-image in the override so the plain color shows.
  • Use !important only as a last resort; prefer proper specificity or scoping.
  • For a long-term, consistent solution, change Bootstrap’s source variables (LESS/Sass) or use the Bootstrap customizer and rebuild so the project stays maintainable.

The snippet posted by is a useful example; placing equivalent rules in a stylesheet loaded after Bootstrap and checking hover/active separately will address the behavior described.

Recommended Answers

All 9 Replies

Member Avatar for AleMonteiro

The best way to find out what you need to change is to use a HTML element inspector. I suggest FireBug for Firefox or developer's tools for IE (I prefer Firebug). I think Chrome and Safari must have something similiar too.

In example, using FireBug:
1. Open the page
2. Open Firebug ( F12 )
3. Click in the 'Inspect Element' tool (Second button from the left)
4. Click the element you want to inspect
5. Read the styles that are applied to the element

This way you can see what css classes are being applied to the element. You can even change the properties at run time and see the results.

Member Avatar for <M/>

Use your browser's web development tools... firebug is prefered

Member Avatar for JorgeM

Chrome's "developer tools" are pretty good and included in the browser (Ctrl-Shift-I), or click on Tools, "Developer Tools". You can inspect as with the other tools mentioned, and make changes to the page's settings. Great for testing and debugging.

Member Avatar for rouse

I was able to find the text color by using chrome as suggested above, but I am not able to locate the hove state which is the problem that I have on hand.
Thanks.

Member Avatar for <M/>

can you send the link?

Member Avatar for <M/>

I will make a moment to solve this for you...

Member Avatar for <M/>

or at least assist you :)

Member Avatar for bootstraptor

Here style from Bootstrap that you need to change what you want:
Put it under Bootstrap.css style in your html

<style>

/* NAV */
.navbar-inner {
    background: #fafafa;  /* ADD COLOR HERE in HEX# or grba() */
}

/* LINKS */

.navbar .nav > li > a {
        float: none;
        padding: 15px 20px 15px;
        color: #777777; /*here link color*/
        text-decoration: none;
        text-shadow: none;
        font-size:14px;
        font-wight:bold;
        text-transform:uppercase;
    }
    .navbar .nav > .active > a, 
    .navbar .nav > .active > a:hover, 
    .navbar .nav > .active > a:focus {
        color: #333;
        text-decoration: none;
        background-color: #fff;
        -webkit-box-shadow:  none;
            -moz-box-shadow:   none;
                box-shadow:  none;
    }
    /************* NAVBAR BRAND ************/
    .navbar .brand {
        padding: 15px 0px 15px;
        margin-left:0px;
            color: #777777; /*brand  color*/
    }
</style>

Put it in your *.html file

You can find free samples examples bootstrap templates on bootstrap samples

Edited by bootstraptor because: change some
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.