Main menu background color change (desktop and mobile)

Airi
#1

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

image
image1288×215 42.9 KB

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

#2

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

#3

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)?

image
image1861×63 7.23 KB

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

#4

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

#5

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

image
image1638×129 13.5 KB

#6

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