How to make the menu items also transparent but leave the drop down menu to be white

Store Design
, , ,
1

URL: https://e8aiud65kvp3vbm4-17240367.shopifypreview.com
Password: testcode123

Code Used:

header-main, header {
    background-color: transparent !important;
}

header {
    position: absolute !important;
    width: 100%;
    border: none !important;
    top: 0 !important;
    z-index: 50 !important;
}

I want it to make the entire header including the menu items (home, shop, etc) transparent, but it should leave the drop down background as white. How would I update the code to do this?

emekayode_0-1708507025026.png
emekayode_0-1708507025026.png1448×297 19.5 KB

2

Hello @emekayode ,

Please use below CSS.

#main-navigation {
    background-color: transparent;
}

Thanks,

Ritu

3

thanks that worked but it changed the mobile version drop down to transparent, is there a way to just have that code affect the desktop version only?

4

Hey @emekayode ,

Add this CSS.

@media(max-width: 768px){
#main-navigation {
    background-color: #fff;
}
}

Thanks,

Ritu

5

actually I found a solution:

@media only screen and (min-width: 1025px) {
#main-navigation {
    background-color: transparent;
}
}