ChristinaD ChristinaD -4 years ago 87
CSS Question

How to have three different bootstrap menu colors on one css file?

I have two pages that the bootstrap navigation menu color is different than the rest of the pages (total three different settings).

The navigation menu is one html file (that is linked to each page).

I want to have all code on ONE css file. How would I do that please?

Thank you. Here is a sample of the code:

.navbar-default {
background-color: #65625B;
background-color: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000)";
zoom: 1;
background-color: rgba(255, 255, 255, 0.0) !important;
border-color: transparent;
border-color: #65625B;
border-color: rgba(255, 255, 255, 0.0) !important;
font-size: 12px;
}

@media(max-width:767px){
.navbar-default {
background-color: #65625B !important;
border-color: #65625B !important;
}
}

/* 3-bar button color */
.navbar-toggle {
background-color: #65625B !important;
}

/* 3-bar button hover */
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #83817b !important;
}

/* 3-bar button border */
.navbar-default .navbar-toggle {
border-color: #65625B !important;
}

Answer Source

Assuming each page has its own body, assign a unique ID to the page that requires a different color.

<body id="my-blue-navigation">

Then in your CSS you refer to the correct class.

#my-blue-navigation .navbar-default {
  background-color: blue;
}

nav {
width: 100%;
height: 100px;
}

.navbar-default {
background-color: red;
}

#my-blue-navigation .navbar-default {
background-color: blue;
}
<body id="my-blue-navigation">
<nav class="navbar-default">
</nav>
</body>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download