Separate backgrounds for main nav and site logo

I have centered my site logo image and the main navigation bar. Both have a white background. I would like the background of only the navigation menu bar to be a different color AND have the menu bar extend to sides of screen.

I know how to change the site header background but that changes background of both site logo and menu. I don’t want that. I want the area with the site logo to be white background and the menu bar background #04b4c3. I also want these backgrounds to go fully from side to side of the screen.

I am using child theme with Sydney Pro. Site is
Please advise what css I could use.
Thank you.

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

#masthead .container {
    width: 100%;

#masthead .col-md-8.col-sm-4.col-xs-12 {
    background-color: #04b4c3;

#masthead {
    padding-bottom: 0;

.btn-menu {
    line-height: 1;

#masthead .col-md-4.col-sm-8.col-xs-12,
#masthead .col-md-4.col-sm-8.col-xs-12 img {
    margin-bottom: 0;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you very much for your prompt reply! I added the code which worked terrific. Thank you. I’ve had to make additional adjustments to make my font show and I wanted to make the the bar wider vertically to match another of our sites but now the category titles of the menu are not centered top to bottom.

I tried adding
Transform: translateY(10%);
and it worked to center the main nav labels but that created problems with spacing on the submenus.

Is there something else I could add?


You can try to add this CSS code as well:

#mainnav {
    display: flex;
    align-items: center;
    justify-content: center;

#mainnav > li > ul {
    top: 86%;

Kind Regards, Roman.

This worked great. Thank you so much!!

You are welcome! :slight_smile:

Kind Regards, Roman.