Why isn't my dropdown menu color change working?

Technical Q&A
1

Hi, I’d like to change the dropdown menu colour to white with black text. To do so I changed the code underneath. On the place of background-color and color there was ‘var’. I changed it to white. But unfortunately, nothing happens. The background becomes transparent. Does somebody know what I do wrong? Thanks!

html:not(.no-js) .navigation__submenu{
–width:250px;
position:absolute;
width:var(–width);
background-color:white(–color-text-header);
color:white(–color-background-header);
padding:var(–spacing-medium-large);
visibility:hidden;
margin-top:var(–spacing-small);
transition:opacity 0s, margin 0s, visibility 0s;
opacity:0;
text-align:left
}

2

Hi Annewil - please share the url of your store.

3

https://hqdueq8qho77z3bf-31618302091.shopifypreview.com

4

Hey, Annewil, the problem is that, actually, this code:

var(--color-text-header)

means that the code is using the function var(variable) to call the variable ‘–color-text-header’, changing ‘var’ to ‘white’ breaks that function. What you have to do is replace it completely, as in:

html:not(.no-js) .navigation__submenu{
  --width:250px;
  position:absolute;
  width:var(--width);
  background-color: white;
  color: black;
  padding:var(--spacing-medium-large);
  visibility:hidden;
  margin-top:var(--spacing-small);
  transition:opacity 0s, margin 0s, visibility 0s;
  opacity:0;
  text-align:left
}

let me know if it works

5

Hi @Annewil

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.css->paste bellow code in bottom of file

html:not(.no-js) .navigation__submenu[data-depth=“1”].active {

background: #fff !important;

color: #333 !important;

font-weight: bold !important;

opacity: 1 !important;

}

It will look like this: https://prnt.sc/8gLBkDDkVBmh

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly