Solved

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

flexecommerce
Shopify Partner
19 0 3

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:

Screenshot 2024-01-08 130815.png

 

Original menu design:

Screenshot 2024-01-08 131023.png

 

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;
}
}

Accepted Solution (1)
Moeed
Shopify Partner
3554 893 1111

This is an accepted solution.

Hey @flexecommerce 

 

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

<style>
nav.header__inline-menu {
    background: #EFEEE9 !important;
    width: 100% !important;
    text-align-last: center;
}
</style>

RESULT:

Moeed_0-1704740124779.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
3554 893 1111

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
flexecommerce
Shopify Partner
19 0 3
Moeed
Shopify Partner
3554 893 1111

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 </body> tag

<style>
nav.header__inline-menu {
    background: white !important;
}
</style>

RESULT:

Moeed_0-1704738622279.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
flexecommerce
Shopify Partner
19 0 3

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

Moeed
Shopify Partner
3554 893 1111

This is an accepted solution.

Hey @flexecommerce 

 

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

<style>
nav.header__inline-menu {
    background: #EFEEE9 !important;
    width: 100% !important;
    text-align-last: center;
}
</style>

RESULT:

Moeed_0-1704740124779.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
flexecommerce
Shopify Partner
19 0 3

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