Change Nav Bar background & font colour - Colorblock Theme

[vmckellar]

Hi there!

I am wanting to change the background colour of the strip behind the navigation/menu bar to #FF79A4.

I would then also like to change the font colour of the navigation to white.

I would still like to keep the rest of the header background white, it is just the horizontal bar that goes behind the navigation items that I'm wanting to change.

I'm using the Colorblock theme.

Thank-you!

Vanessa.

[suyash1]

@vmckellar - can you please share your website link?

[vmckellar]

Hi @suyash1,

Yeah sure, it's https://www.daisyandwillow.com.au/

Thanks!

[suyash1]

@vmckellar - add this css too

@media screen and (min-width: 990px){
.header {padding: 0 !important;}
}

[vmckellar]

@suyash1 Ok that made it slightly wider, but not full screen:

[suyash1]

@vmckellar - add this too

.header{max-width: 100%;}

[vmckellar]

@suyash1 OK perfect! 😊

Now, how to change the font colour to white and add just a little bid of padding above the logo?

Thank you!

[suyash1]

@vmckellar - I do not recommend white as your drop down background is also white, it will not be visible

[vmckellar]

@suyash1 Ahh ok, is there anyway to change just the font in the nav bar and leave the drop downs as is?

[suyash1]

@vmckellar - try this

.header__menu-item span {color: #fff;}
.header__menu-item .icon-caret path{fill: #fff;}

[vmckellar]

@suyash1 Thank you so much!

It worked, except it also changed the colour for any of the menu items with sub-items/further drop downs in the drop downs:

 

[suyash1]

@vmckellar - try this

.header__submenu .header__menu-item span{color: #000;}

[vmckellar]

@suyash1 thank you again, but the little arrows for the drop downs must still be in white:

 

[suyash1]

@vmckellar - it is white only

[vmckellar]

Thanks @suyash1, but before we changed the font colour of the nav bar to white, the little arrows on the drop downs were black like this:

Now they must be white as we can't see them:

Are we able to keep them black?

Thanks! 

[vmckellar]

All good, figured it out. Added this line of code:

.header__submenu .icon-caret path{fill: #000;}

[suyash1]

@vmckellar - great, do let me know if you need any other update, you can message here or you have my email below

[vmckellar]

Thank you so much, I really appreciate the help! 😊

[suyash1]

@vmckellar - your header is in grid format and hence menu does not go full width horizontally and that is why it will not be a complete strip, so it needs css editing, please check screenshots, it changes alignments a bit

[suyash1]

@vmckellar - please add given css to the very end of your base.css file and check

.header__inline-menu{background-color: #FF79A4;    width: 100%;    text-align: center;}
.header__search{padding-left: 5rem;}
.header__icons{padding-right: 5rem;}

[vmckellar]

@suyash1 thank you!

It's not running across the entire screen at the moment, only the page width: