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

Solved

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

emekayode
Explorer
58 2 11

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

 

Accepted Solution (1)
Ritu-25
Shopify Partner
129 26 15

This is an accepted solution.

Hey @emekayode , 

 

Add this CSS. 

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

 

Thanks, 

Ritu 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com

View solution in original post

Replies 4 (4)

Ritu-25
Shopify Partner
129 26 15

Hello @emekayode , 

 

Please use below CSS. 

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

 

Thanks, 

Ritu 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
emekayode
Explorer
58 2 11

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
Shopify Partner
129 26 15

This is an accepted solution.

Hey @emekayode , 

 

Add this CSS. 

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

 

Thanks, 

Ritu 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
emekayode
Explorer
58 2 11

actually I found a solution:

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