Back ground color mega menu

[Karla8]

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)

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

Thanks in advance for your help !

Karla

[topnewyork · Accepted solution]

@Karla8 
Try the below code:

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

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

Thanks!

[Rahul_dhiman · 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

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

[radaevich]

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;

}

[Rahul_dhiman]

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

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

[Karla8]

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 ?

[topnewyork]

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!

[Karla8]

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]

@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.

[topnewyork · Accepted solution]

@Karla8 
Try the below code:

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

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

Thanks!

[Rahul_dhiman · 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

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

[Sangeetanahar]

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: #F8F8F8;
width: 86% !important;
}

Buy me a Pizza

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

[Made4uo-Ribe · Accepted solution]

Hi @Karla8 

Do you mean like this? 

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!