How to make header and dropdown transparent (Stiletto theme)

[adimenon]

I have a header with a dropdown menu, and I'm trying to make the dropdown menu transparent to match the header's appearance seamlessly.

Here's a brief description of what I'm aiming for:

• I want the dropdown menu background to be completely transparent.
• The text within the dropdown menu should remain visible and styled appropriately, preferably in hex EDE6D6

www.okhli.com.au

[BSSCommerce-HDL · Accepted solution]

Use this if you want to change border of sub menu too

<style>
        .navigation__submenu-list {
            background: transparent!important;
            color: #EDE6D6!important;
            border: solid #EDE6D6 1px!important
        }
</style>

Or remove border:

<style>
        .navigation__submenu-list {
            background: transparent!important;
            color: #EDE6D6!important;
            border: 0!important
        }
</style>

[BSSCommerce-HDL]

Can you share password to enter your store? So we can firgure out problems

[adimenon]

whoops! sorry.. my bad!

it's Narre_3805

[BSSCommerce-HDL]

Got it. You can try this way:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
        .navigation__submenu-list {
            background: transparent!important;
            color: #EDE6D6!important;
        }
</style>

Here is result:

 Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍 

[BSSCommerce-HDL · Accepted solution]

Use this if you want to change border of sub menu too

<style>
        .navigation__submenu-list {
            background: transparent!important;
            color: #EDE6D6!important;
            border: solid #EDE6D6 1px!important
        }
</style>

Or remove border:

<style>
        .navigation__submenu-list {
            background: transparent!important;
            color: #EDE6D6!important;
            border: 0!important
        }
</style>

[adimenon]

Thanks for that! Is it possible to incorporate the transparency even when you hover? Also the dropdown has a border.. how can I remove the (green) border. Make the Header and dropdown transparent but keeping the font and font colours the same.

Thanks so much!

[BSSCommerce-HDL · Accepted solution]

Are you meaning all of header is transparent only when hover?
If true, you can try this:

<style>
        .navigation__submenu-list {
            background: transparent!important;
            color: #EDE6D6!important;
            border: 0!important
        }

.header.header--layout-logo-center-nav-below.header--has-logo.header--transparent.header--has-transparent-logo.header--navigation-is-all-caps:hover {
background: transparent!important;
} 
</style>

Here is result:

[adimenon]

That worked beautifully!! Thank you sooo much!

[adimenon]

I'm so sorry to ask you... but is it possible to do the same for mobile viewing as well?

[GTLOfficial]

are you looking for something like this in mobile.

[BSSCommerce-HDL]

Youre welcome. Have a good day!

[GTLOfficial]

Hello @adimenon 

Go to online store ---------> themes --------------> actions ------> edit code------->theme.css
add this code at the end of the file.

.navigation__submenu-list {
background: transparent !important;
color: beige !important;
border: 2px solid beige;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[adimenon]

Thanks for that! Is it possible to incorporate the transparency even when you hover? Also the dropdown has a border.. how can I remove the (green) border. Make the Header and dropdown transparent but keeping the font and font colours the same.

Thanks again!