Main menu / Make dropdown menu transparent

[CaliWorld]

Hello to all!

I have a problem with my online store. I would like to have the dropdown menu from the menu bar in the header transparent. I saw that the background is coupled with the main background.
Is there anyone here who can make the background in the dropdown menu transparent for me?
Already tried different opacity values in the code, to no avail!

Thanks a lot in advance!

[oscprofessional]

Hi @CaliWorld ,

Share your store URL.

[CaliWorld]

cali-world.de

[oscprofessional]

like this you want?

[CaliWorld]

No. In your screenshot behind "Products" the background is black. It should also be transparent.
The font at "CBD flowers" and "Food & Drinks" should be normal thick. The background behind the two categories should also be transparent.

[Akibhusen]

Hi @CaliWorld,

Hope you are well. Can you please share the URL of your store? So, I get better idea for the change

[CaliWorld]

Hi @Akibhusen 

its cali-world.de

[Akibhusen]

Hi @CaliWorld,

Please add the below CSS at the end of your theme.css file. let me know if you want any changes after implementation.

.site-nav__dropdown{
	background-color:transparent;
}
.site-nav__dropdown a{
	background-color:transparent;
	color:#000;
}
.site-nav--has-dropdown.is-focused>a, .site-nav--has-dropdown:hover>a{
	background:transparent !important;
}

[CaliWorld]

Hi @Akibhusen 

thank you very much. It works!

BUT! The text is black now, not white haha. In which Code i have to change it in #ffffff`?

EDIT: Oh i got it. It was beacause your 000 in color. I got in now. Thank you very much @oscprofessional @Akibhusen 

[oscprofessional]

Use for white color  #fff .

[Akibhusen · Accepted solution]

hi @CaliWorld,

You can mark it as an accepted solution. So other should know there are no action required for this thread.

[oscprofessional]

a.site-nav__dropdown-link.site-nav__dropdown-link--second-level {
    background: transparent;
}
a.site-nav__link.site-nav__link--has-dropdown {
    background: transparent;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid