Main menu background color change (desktop and mobile)

Hi Support,
You guys have a very well designed theme and I truly appreciate your work.
website triskel.com

I’m using Basic Menu #4 and like how it looks but I cannot find how to change the background color. Right now it’s kinda dark blue. Can you please help?
I tried different CSS from the support threads but none worked.

Happy Holidays,
Andrew

Hi Andrew,

Thank you for contacting us.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .menuStyle6 .site-header {
      background-color: #550c88;
    }  

Regards,
Kharis
aThemes Support

This worked perfect, Kharis. Thank you.

Is the top section called “.top-section”? When I add the color to that section in CSS, it only changes the boxed content and not the whole width. What’s the code for the top section (left to right)?

I used this but it doesn’t work for me:
.menuStyle6 .top-section {
background-color: #ccc;
}

You’re welcome!

Is the top section called “.top-section”? When I add the color to that section in CSS, it only changes the boxed content and not the whole width. What’s the code for the top section (left to right)?

Try this code:

    .menuStyle6 .site-header .top-section {
      background-color: #ccc;
    }

Regards,
Kharis
aThemes Support

Hi Kharis,
Thank you but it didn’t work well - the left and right parts are still blue.

Hi,

Try adding this CSS code:

    .site-header .container {
    	 max-width: 100% !important;
    	 width: 100% !important;
    }
     .site-header .top-section {
    	 margin-left: -15px;
    	 margin-right: -15px;
       background-color: #ccc;
    }
     .site-header .top-section .row, .site-header .bottom-section {
    	 margin-left: auto;
    	 margin-right: auto;
    }
     @media only screen and (min-width: 768px) {
    	 .site-header .top-section .row, .site-header .bottom-section {
    		 max-width: 720px;
    	}
    }
     @media only screen and (min-width: 992px) {
    	 .site-header .top-section .row, .site-header .bottom-section {
    		 max-width: 960px;
    	}
    }
     @media only screen and (min-width: 1200px) {
    	 .site-header .top-section .row, .site-header .bottom-section {
    		 max-width: 1140px;
    	}
    }

Regards,
Kharis
aThemes Support