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
Natztech
Shopify Partner
2236 565 1373

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
269 22 52

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
- Should you need any direct help: contact@ecommpremium.com
- SKYPE: ahsanaliawan
- shopifyexperts
EmilSinding
Tourist
5 0 2

adamocph.com

Pass: Eyy

Ecommpremium
Shopify Partner
269 22 52

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
- Should you need any direct help: contact@ecommpremium.com
- SKYPE: ahsanaliawan
- shopifyexperts
KetanKumar
Shopify Partner
24911 2497 9033

@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

Natztech
Shopify Partner
2236 565 1373

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

Zworthkey
Shopify Partner
2563 308 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
KetanKumar
Shopify Partner
24911 2497 9033

@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