Transparent Drop-Down only on the home page

Store Design
, , , , , , ,

Topic summary

A user successfully made their header dropdown menu transparent using custom CSS code that removes the background color and border while setting all header text to white.

They now want to:

  • Apply this transparent dropdown only on the homepage
  • Use a black background with white text on all other pages (product pages, category pages, etc.)
  • Add a white separator line between menu items in the dropdown

The discussion appears to be awaiting responses with solutions for conditionally applying different header styles based on page type. The user has shared their current CSS code and included a reference image showing their desired outcome.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,
I have made my dropdown menu in the header transparent with the following code.

details[open] > .header__submenu {
  background-color: transparent !important;
  border: none !important;
}
.header-wrapper * {
  color: white !important;
}

However, now I would like to have it on product pages, category pages etc. with a black background and have a white font (only on the homepage transparent). Is it also possible to have a separator in white in between like in thepicture? Thanks for your help!

Bildschirmfoto 2024-03-27 um 18.56.28.png
Bildschirmfoto 2024-03-27 um 18.56.28.png803×559 42.4 KB

2

Share Preview Link