Re: Back ground color mega menu

Solved

Back ground color mega menu

Karla8
Explorer
57 0 13

Hello all, 

 

I've been trying to change the background color of the menu + dropdown without success (I only managed to change the whole header section)

 

In the example below you can see it a bit what I'm trying to achieve (although the color is very light)

 

Screenshot 2024-09-12 125024.png

 

My website is www.hintofhappiness.com and the password is seiyud

 

Thanks in advance for your help !

 

Karla

Accepted Solutions (3)
topnewyork
Astronaut
1121 150 185

This is an accepted solution.

@Karla8 
Try the below code:

 

nav.header__inline-menu {
    background-color: #d9c0ad !important;
    width: 100%;
    display: flex;
    justify-content: center;
}

 

topnewyork_0-1726141246382.png

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!



Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

View solution in original post

Rahul_dhiman
Shopify Partner
739 143 150

This is an accepted solution.

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.header__inline-menu .list-menu--inline .header__menu-item {
background: #d9c0ad;
}

result
10.png

If this was helpful, hit the like button and accept the solution.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

View solution in original post

Made4uo-Ribe
Shopify Partner
9846 2340 2934

This is an accepted solution.

Hi @Karla8 

Do you mean like this? 

Made4uoRibe_0-1726141485012.png

If it is check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

 

nav.header__inline-menu {
    background: #d9c0ad;
}
.mega-menu__content .mega-menu__list {
    background: #d9c0ad;
    padding: 5rem 0;
}
.mega-menu__content {
    padding: 0;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 9 (9)

radaevich
Excursionist
12 2 2

Hello!

Try to find this class in the file and apply a background to it. Or create what I wrote at the very bottom

assets/base.css

details[open]>.header__submenu {

background: #F8F8F8;

}

If you find our suggestions helpful, please let us know by liking it or marking it as a solution.
Or Buy me coffee or food for my cat ♥

Rahul_dhiman
Shopify Partner
739 143 150

Hello @Karla8 
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-mega-menu.css
add this code at the end of the file.

.mega-menu__list {
    background: #d9c0ad;
    width: 87% !important; 
}

 

 

result
9.png

If this was helpful, hit the like button and accept the solution.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

Karla8
Explorer
57 0 13

Thank you, I managed to get 1 item from the menu as well as the dropdown. Would it be possible to have it for all items in the menu ?

 

Screenshot 2024-09-12 132045.png

topnewyork
Astronaut
1121 150 185

Hi @Karla8 ,

 

Try the below code for remaining items

 

 

<style>
  #HeaderMenu--new-, 
  #HeaderMenu-chip-bags, 
  #HeaderMenu-foil-tickets {
    background-color: #d9c0ad !important;
  }

</style>

 

 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
Karla8
Explorer
57 0 13

thank you ! is it possible to have the full line colored instead of having only the menu items ? sorry don't know how to explain but I line of color that covers the menu items 🙈

topnewyork
Astronaut
1121 150 185

@Karla8 Kindly mark the above as accepted solution and like it as it helped you. Moreover I am giving you the solution for your next query i.e full line.

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
topnewyork
Astronaut
1121 150 185

This is an accepted solution.

@Karla8 
Try the below code:

 

nav.header__inline-menu {
    background-color: #d9c0ad !important;
    width: 100%;
    display: flex;
    justify-content: center;
}

 

topnewyork_0-1726141246382.png

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!



Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
Rahul_dhiman
Shopify Partner
739 143 150

This is an accepted solution.

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.header__inline-menu .list-menu--inline .header__menu-item {
background: #d9c0ad;
}

result
10.png

If this was helpful, hit the like button and accept the solution.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

Made4uo-Ribe
Shopify Partner
9846 2340 2934

This is an accepted solution.

Hi @Karla8 

Do you mean like this? 

Made4uoRibe_0-1726141485012.png

If it is check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

 

nav.header__inline-menu {
    background: #d9c0ad;
}
.mega-menu__content .mega-menu__list {
    background: #d9c0ad;
    padding: 5rem 0;
}
.mega-menu__content {
    padding: 0;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.