How can I alter the dropdown menu background color?

Store Design
1

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
Unavngivet.png898Ă—366 10.6 KB

2

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

3

adamocph.com

Pass: Eyy

4

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

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

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.png
Unavngivet.png862Ă—350 19.9 KB

Unavngivet2.png
Unavngivet2.png637Ă—200 7.84 KB

7

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

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.

9

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