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

[emekayode]

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?

[Ritu-25]

Hello @emekayode , 

Please use below CSS. 

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

Thanks, 

Ritu 

[emekayode]

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?

[Ritu-25 · Accepted solution]

Hey @emekayode , 

Add this CSS. 

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

Thanks, 

Ritu 

[emekayode]

actually I found a solution:

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