Change background colour of nav bar (Bootstrap/Genesis)

Question

I'm running Bootstrap on the Genesis framework on Wordpress. I have a top level navigational bar which I'd like to change from black to white. This was originally Bootstrap but when I put the site onto Wordpress I believe it may have changed to a genesis default.

I've tried changing the class background colour .site-header but it doesn't seem to relate.

Adding a background-color to .wrap seems to change the color of the nav bar but leaves out the buttons, so I believe this maybe a red herring.

Can someone take a look - URL at: https://www.moneynest.co.uk/blog/

Rahul · Accepted Answer · 2017-01-26T11:33:21.713

1

just try below code and see

.site-header .wrap, header.site-header .genesis-nav-menu a {
    background-color: #6a1010;
}

edited Jan 26 '17 at 11:33

answered Jan 26 '17 at 11:18

Rahul

4,294
1
10
12

I added this into my general stylesheet but had no luck so then tried adding it into Genesis Extende this half worked as the right hand side of the menu has remained in black? Updated on live page. – Sam Jefferies Jan 26 '17 at 11:30
@SamJefferies check my updated answer it should work for you – Rahul Jan 26 '17 at 11:34
Boom! Thanks, that worked. Any idea why I've been down voted? Also how did you figure this out? – Sam Jefferies Jan 26 '17 at 12:22
Also on hover the buttons still revert to a black background I assume this would be a pysdo class, would you which one? – Sam Jefferies Jan 26 '17 at 12:24
you got downvoted because you have not posted any code just direct link to site is not recommended, atleast post some relevent code to your problem – Rahul Jan 26 '17 at 15:55
Thanks Rahul, that's useful to know. – Sam Jefferies Jan 26 '17 at 15:58

score 0 · Answer 2 · answered Jan 26 '17 at 11:14

Try this code, I have successfully changed my navbar background color.

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li      > a:focus {
color: #000;  /*Sets the text hover color on navbar*/
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav >   .active   >   
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}

.navbar-default {
background-color: #0f006f;
border-color: #030033;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF;  /*change color of links in drop down here*/
}

.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}


.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}

score 0 · Answer 3 · answered Jan 26 '17 at 11:18

If you are using bootstrap, check to see whether you have added the .navbar-inverse class. If you have simply replace it with .navbar-default. The .navbar-inverse is a black background based navbar where as .navbar-default is its white counter part.

Change background colour of nav bar (Bootstrap/Genesis)

3 Answers3