Change Color of Top Bar Above Main Photo

Hello!

Especially for questions related to themes and customizing them, it would really help to be able to see the website in question because then it would allow non-theme authors (like myself) to try to help you figure out the problem.

If we can see the site and see the code, chances are, we can at least try and help. Without it, we can’t do anything.

If you can link us, then we can take a look for you! ??

Cheers!

For the navbar (note this is both the navbar and just the top one) you add the following CSS rules to either a child theme or a custom CSS plugin – please do not edit the theme’s files directly.

.navbar-inverse,
.dropdown-menu {
   background-color: #00a5c5;
}

Change the value for #00a5c5 to your desired color. You’d then need to target the hover/dropdown states for the elements – so add this code after the above code..

.navbar .nav a:hover,
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: #208dbe;
}

again changing the value of #208dbe to your desired hover color.

Regards,
Zulf

I added the custom CSS code into a plugin called Simple Custom CSS and it is not working. The website address is realmofhunters.com

Did you change the color value? i.e from #00a5c5 to something like #ce021d which is a shade of red?

With the above red color the code would look like

.navbar-inverse,
.dropdown-menu {
   background-color: #ce021d;
}

tested on your site via FireFox right click, select “Inspect element” and in the new pane at the bottom of the browser select the “Style Editor” and then on the far left second pane select new and add the code – the results should be instantaneous.

Zulf

ok so im kinda new to the administration end of things… i have a website bobwallaceexcavating.ca… anyways i want to change the navbar colour to #dd9933 .. which is an orange… can you help me with this… by the way so far i love this theme it looks professional.

nevermind… just need to read your instructions more closely… worked great

Hello, I’ve tried the following:

.navbar .nav a:hover,
.navbar-inverse, .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse, .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse, .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: #000012;
}

In order to change the hover color for the nav bar, but it doesn’t seem to be working. I created a child theme and copied this into my style.css file of my child theme. Am I doing something wrong?

In my style.css file, the above code is listed below the following

.navbar-inverse,
.dropdown-menu {
	background-color: #8B0000;
}