CODEWITHSUNDEEP
csstwitter-bootstrap
JakeP
JakeP

Reputation: 757

Customizing the color of bootstrap's navbar?

I haven't touched the core bootstrap files - in my own CSS I have the following: 

#menu-bar div {
    border-color: #0072A6;
    background-color: #0072A6;
    margin: 0;
}

#menu-bar .navbar {
    border-color: #0072A6;
    background-color: #0072A6;
    margin: 0;
}

#menu-bar .navbar-inner {
    border-color: #0072A6;
    background-color: #0072A6;
    margin: 0;
    height: 200px;
}

#menu-bar p, #menu-bar a {
    color: white;
}

#menu-bar .active a {
    color: white;
    background-color: #0072A6;
}

This has gotten me where I want for screens > 1024px wide, however something in the responsive bootstrap css is causing this black border to wrap the menu for smaller screens:

rogue border

Does anyone know how I can remove this? I've made a fiddle of it here including bootstrap to make it easier to play with:

http://jsfiddle.net/AmZ5L/

I'm also trying to figure out how to customize that button color in case anyone's feeling super generous with their time.

Upvotes: 1

Views: 19188

Answers (2)

adrianbanks
adrianbanks

Reputation: 82944

Add background-image: none; to your #menu-bar .navbar-inner style. This will override the bootstrap style that is giving the black border (.navbar-inverse .navbar-inner in bootstrap-combined.css).

To change the colour of the button, override the .navbar-inverse .btn-navbar style:

.navbar-inverse .btn-navbar
{
    background: red;
}

Upvotes: 2

Omega
Omega

Reputation: 3038

.navbar-inverse .btn-navbar is what defines your button color.

.navbar-inverse .navbar-inner is what defines the black border.

Upvotes: 3

Related Questions