Header background color

Shapely
1

Hello, can you provide the custom CSS for changing the header background color? I figured out the CSS for the menu background, but I want to change the entire top section. I tried ‘.header,’ but didn’t work.

Thank you,

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the navigation bar color by going to Appearance > Customize > Additional CSS and pasting it there.


nav {
    background-color: red;
}

Best Regards,
Support

3

Hello Support,

Well, I tried that and it did not change the navigation background color. I do have the following change below for the footer section. Is there something similar that works for the Shapely theme for the header - navigation section?

footer#colophon {
background: #34495E;
}

Thanks again,

4

Hello there,

Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

5

Yes, here it is
quaniv.com

Thank you,

6

Hi there

Changing navigation section bg color is possible from appearance > customize
also you can use this css:

.main-navigation {
background: rebeccapurple !important;
}

7

Okay, that worked. Thank you :slight_smile:
I tried this prior, but it looks like the “!important” overrides the layers and displays the changes.
I recently purchased the hatch theme, so I’m assuming that this CSS will work the same.

Regards,

8

Hey there :slight_smile:

Ok, nice, i will close this case now, let us know if you need anything else in new ticket :slight_smile: