Solved

Change Background Color of Dropdown Menu

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)
Kinjaldavra
Shopify Partner
2302 570 1422

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

 

View solution in original post

Replies 8 (8)

Ecommpremium
Shopify Partner
512 43 93

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
512 43 93

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
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 570 1422

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

 

Zworthkey
Shopify Partner
5581 642 1565

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
36839 3635 11972

@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
KetanKumar
Shopify Partner
36839 3635 11972

@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