How do I change the main menu navigation bar color?

If I may step in and try to help…

Try this CSS Code.

element.style {
    background-color: #e0ebe6;
}

Hi @akitzer

So sorry for missing your questions, I’ll check my notification settings right now.

@chook, thanks for assisting, really appreciate it.

All the best.

Hi Chook thank you for trying to help, I appreciate it!
So I can’t figure out how to change the footer color either. To change the main menu color I literally copied the entire CSS section that said 5.2.3 Main Menu and the Responsive Main Menu and changed the colors that were there to the colors I wanted it to be (in a Custom CSS editor), but it’s still white. The footer color is also still gray, even though I replaced everywhere where it had the gray hex code to the blue that is used in the logo. Would you happen to have any more suggestions I can try? Thank you so much!

Cheers’ Let’s see if this helps…
I hope you have taken a backup of your styles.css or making changes in a CSS Plugin such as SiteOrigin CSS

Not sure the below CSS this is part of your own css or the themes. Change the ‘white’ to your HEX value

.site-header.is-stuck {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: white;     /**  Change white to #E0EBE6  **/
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    opacity: 1;
    top: 0;
}

Yeah I know it’s a bit crude and edits should be done in a Child theme. But I think if small CSS edits are the only mod then a CSS plugin is fine.

Hi @akitzer

Thanks for the wait. Please, see your other topic for an explanation with regards to my delay in replying. Apologies again for that.

The selectors for the header and footer backgrounds are:

/* Header */
.site-header {
    background: #d33;
}

.site-header.is-stuck {
    background: rgba(221,51,51,0.9);
}

/* Footer */
.site-footer .footer-main {
    background: #d33;
}

The second rule, .site-header.is-stuck is a RGBA value of whatever you set as your color in the first rule. 0.9 is the opacity, setting that to 1 will make it solid.

If you’d like to make a lot of color adjustments to the theme but would prefer to continue to use the free version (all of these settings are in premium) then it’s worth checking out SiteOrigin CSS which has a visual editor you might find useful. Here is the documentation for the visual editor component of SiteOrigin CSS: https://siteorigin.com/css/visual-editor/

Thank you so much Andrew! I actually do have the SiteOrigin CSS downloaded but never realized I could switch from the code view to the visual editor. Also, thank you for the code too, you are the best!

Awesome ?? Glad that helped.