How to Overcome Bootstrap's Default Styling? Element targeting issues?


Tags: html,css,twitter-bootstrap

Problem :

I've been rebuilding my website in Bootstrap in order to get a quick prototype up while I design something a bit more robust myself. It's been proving more bother than it's worth when it comes to overriding the default styling.

The website is here if you need it for reference.

I'm trying to get the background colour of the "Home" link to be white. I've succeeded in styling the other navbar links.

Here's an example of the type of CSS I was using to target (I don't think there are issues here):

.white-back, #home {
    background-color: white;
}

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active" id="home"><a href="http://kennethfrancis.com">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

I've tried putting an ID on li.active as well as on the contained a. It didn't work when I set the background colour of li.active > a to white. I tried even using !important. Is there something I'm missing here? I attacked a couple of different ways based on what the Firebug inspector said that object was.

Now, looking at this with everything else stripped out around it makes me feel as though I've gone nested-div crazy. Can I strip any of these away and maintain the structure of the page?

It would be great also if anyone could toss in any links about how to overcome this sort of element targeting/overriding problem. Anything relevant.



Solution :

If you are using class then you need to make sure your CSS is more specific to be applied. So li.active a won't work as it gets overridden by default Bootstrap classes since it's more specific than your styles.

You need to target like the below code for it to work

.navbar-default .navbar-nav>.active>a {
  background: #fff;
}

In case you are using id #home for li, then you can use

#home a {
  background: #fff;
}

Hope this helps


    CSS Howto..

    How to keep text in same position?

    How to set div to display in only one line?

    How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?

    How can I show an attribute as text with CSS?

    How do you tell a browser, “if you need to wrap, wrap here first”?

    How do I disable warnings from Aspx files (HTML,CSS)

    How can I replace the text in an

    from a CSS file without using a tag?

    How to create this CSS border

    How to programmatically add JS and CSS resources to ?

    How to display the bottom of an image?

    jquery - how to queue up a series of css property changes

    How to add Print headers and footers in HTML, CSS and JavaScript?

    How to change link color when using jquery mouseover

    How do I center text relative to its parent div with CSS?

    Multiple buttons in CSS + Button with an image not showing properly

    IcoMoon App icon fonts are shown as 

    Overlapping image in photoshop splice, how to float with CSS

    How to make last element of second level of menu to drop up?

    How do i add an external CSS file as well as CSS in the HTML file?

    How to embed a custom bitmap font into website using CSS

    How to get alternate colors div with pure css and with IE 7 support?

    on hover and on click how to fade out image and fade in content text

    How to make this rounded shape with css [duplicate]

    How to change the focus state in CSS to just affect the keyboard and not mouse clicks

    ckeditor - how to get custom-css with id to work?

    How to add conditional formatting to list items in CSS

    How to display heading and paragraph elements inline in css?

    AngularJS: How to unselect a span when selecting another

    How to leave some top gap for H2 title tag with css

    how to add dots (…) with the same width?