FROM CACHE - en_header

Change Background Color of Dropdown Menu

Solved
EmilSinding
Tourist
5 0 2

Hello,

Im having trouble changing the background and text color of my dropdown menu. I want it all black, with white text.

I have attatched a screenshot to helt you understand my issue.

Thank you in advance,
Emil

Unavngivet.png

Accepted Solution (1)

Accepted Solutions
Kinjaldavra
Shopify Partner
2302 569 1407

This is an accepted solution.

hello @EmilSinding 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 .site-nav__item:hover .site-nav__link, .site-nav__item:hover .site-nav__dropdown-link  {
     background: transparent !important; 
    color: #ffffff !important;
}
.site-nav__item .site-nav__dropdown-link {
     background: transparent !important; 
    color: #ffffff !important;
}
.site-nav--has-dropdown .site-nav__link--underline::after {
    border-bottom-color: #ffffff;
} 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

Replies 8 (8)
Ecommpremium
Shopify Partner
446 36 82

hi @EmilSinding  can you please provide store URL so i can give you its solution?

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
EmilSinding
Tourist
5 0 2

adamocph.com

Pass: Eyy

Ecommpremium
Shopify Partner
446 36 82

Add this in bottom of theme.scss.liquid for  using DAWN theme put in the bottom of Base.css

 

.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
background-color: black;
    color: white;
}
- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
KetanKumar
Shopify Partner
34439 3446 11277

@EmilSinding 

thanks for url can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
    background-color: #ffffff;
    color: #000;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EmilSinding
Tourist
5 0 2

This white box is still a problem. Can you also help me remove the box around "Shop" and make an underline like shown on picture nr 2?

 

 

Unavngivet.pngUnavngivet2.png

Kinjaldavra
Shopify Partner
2302 569 1407

This is an accepted solution.

hello @EmilSinding 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 .site-nav__item:hover .site-nav__link, .site-nav__item:hover .site-nav__dropdown-link  {
     background: transparent !important; 
    color: #ffffff !important;
}
.site-nav__item .site-nav__dropdown-link {
     background: transparent !important; 
    color: #ffffff !important;
}
.site-nav--has-dropdown .site-nav__link--underline::after {
    border-bottom-color: #ffffff;
} 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
Zworthkey
Shopify Partner
5581 642 1512

Hii, @EmilSinding 
Paste this code on top of the theme.scss file.

a.site-nav__dropdown-link.site-nav__dropdown-link--top-level {
    background-color: black !important;
    color: white !important;
}

Thank You.

KetanKumar
Shopify Partner
34439 3446 11277

@EmilSinding 

yes please try thsi code

.site-nav--has-dropdown.is-focused>a,.site-nav--has-dropdown:hover>a{
  color: #ffffff !important;
  color:var(--colorTextBody) !important;
  background-color: #000000;
  background-color:var(--colorBody);
}
.site-nav__dropdown a {
background-color: transparent;
    color: #fff;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing