How Do I Change Menu Color Bar Only In Dawn Theme?

[flexecommerce]

I already tried adding the following code to the bottom of my base.css file but that did not do anything. Looking to have a different color background just for the menu items section. See the attached picture for the space I want to be a different color.

Area to be edited:

Original menu design:

Code tried:

@media screen and (min-width: 990px) {
#shopify-section-header > sticky-header {
background: linear-gradient(
0deg
, black 37%, white 38%);
}

#shopify-section-header > sticky-header > header > nav > ul> li > a {
color: white !important;
}

.header__active-menu-item{
color: white !important;
}
}

[Moeed]

Hey @flexecommerce

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[flexecommerce]

https://southern-elite-plumbing-and-electrical.myshopify.com/

PASSWORD: HOME

[Moeed]

Hey @flexecommerce

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[flexecommerce]

I would like this edit to stretch the width of the page

[Moeed]

Hey @flexecommerce

Update the code with this code and it should be as you require then!

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[flexecommerce]

That messed up the design on the mobile page, I can increase bottom margin but then that changes the design of the desktop landing page as well