Change header drop menu backgroud color and font color

[Alliance]

Hi guys,

I have just removed one mega menu app from my store. The standard home page drop menu background became white. I would like to make all drop menu background color to be the theme color #d0021b, and font color white.

Thank you

allianceautoproducts.com

[Simonsron]

.site-nav--has-dropdown>.site-nav__dropdown{
background-color:#d0021b;
}

[Alliance]

Thank you. I did a mistake. Want it to be like my Faq page. When you scroll the menu, the menu item get highlight with read color.

[Simonsron]

I may not have understood what you meant?

[MandasaTech]

Hello @Alliance

I would like to give you a solution to support you:

1. Go to Online Store-> Theme-> Edit code
2. Open your theme.liquid theme file
3. Paste the below code before :Was my reply helpful?

<style>

.site-nav__dropdown {
background-color: #d0021b !important;

}
</style>

Please Like and Accept Solution. This mean alot to me.

[Alliance]

When you hover any menu item, it get highlited with red tab like this:

[Simonsron]

This is the current style, what do you want it to look like?

[Alliance]

Need the same style for all other drop menu. Thats for FAQ page only.

[Simonsron]

.site-nav__dropdown .site-nav__link:hover{
background-color:your color;
}

[Alliance]

Didn’t work. I need just hover tabs.

[Simonsron]

your color Change to your highlighting colour parameter!

[Alliance]

Got it. Two things:

1- Got size issue with “Ceramic Coating” Menu

2- Make tabs fully fit the menu width.

3- Make the drop menu backgroud little transparent.

Thank you

[Simonsron]

.site-nav__childlist{
background-color:#000;
}
.site-nav__dropdown--centered{
width:auto !important;
    left: auto !important;
}

[Alliance]

That menu issue is fixed. Thank you. Only these two things:

1- Make tabs fully fit the menu width.

2- Make the drop menu backgroud little transparent.

[Simonsron]

.site-nav__dropdown{
background-color:rgba(0,0,0,.5);
padding: 11px 5px !important;
}

[Alliance]

Can we consider all of that in Mobile View?

[Ujjaval]

@Alliance
add below css

.site-nav__dropdown {
    background-color: rgba(0,0,0,.7) !important;
    padding: 5px 2px !important;
}
.site-nav__dropdown--left:not(.site-nav__dropdown--centered) {
    left: 0;
    margin-top: -17px !important;
}

[Alliance]

Need to apply all in Mobile View. Thank you