How can I add more pages to my CSS script for a transparent menu bar?

Store Design
, , , , , , ,

Topic summary

A user is trying to extend their CSS script that creates a transparent menu bar on the homepage to additional pages, specifically the contact page. They want flexibility to choose which pages display the transparent background versus the default black menu bar.

Current Setup:

  • Uses conditional Liquid templating ({% if template.name == 'index' %}) to apply transparent styling only to the homepage
  • Dawn theme on Shopify

Proposed Solution:
Another user suggests adding template names to the body class using Liquid:

<body class="{{ template.name }}">

This enables CSS targeting of specific pages:

body.index .header-wrapper,
body.product .header-wrapper,
body.contact .header-wrapper {
  /* transparent styles */
}

Additional Recommendation:

  • Remove !important declarations from CSS as it’s considered bad practice

The solution provides a scalable approach to apply transparent headers across multiple pages by leveraging template-based CSS selectors rather than inline conditional styling.

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

Hi,

We use css script to show transparant menu bar on home page and rest of the pages black menu bar brackground. We want to involve the transparent background on more pages, by example the contact page. How to involve more pages in the css script, so we are able to choose which pages have the transparent background. So include more pavers, whenever we like.

Question: add more pages besides index to display the transparent menu bar.

site: adfarm.nl

theme: dawn

The script:

{% if template.name == 'index' %} .header-wrapper { position: absolute !important; width: 100% !important; top: 0px !important; background-color: transparent !important; color: black !important; /* Set text color to black */ } {% else %} .header-wrapper { background-color: black !important; /* Set background color to black */ color: white !important; /* Set text color to white */ } {% endif %}
2

Hi @adfarm

You can probably do this in several ways. For example, you could add the template.name to body class

, and for products/collection add hadle.

That way you can then in CSS target pages you want to have transparent menu bar.

body.index .header-wrapper,
body.product .header-wrapper, {
position: absolute !important;
width: 100% !important;
top: 0px !important;
background-color: transparent !important;
color: black !important; /* Set text color to black */
}

Here it is added to the home and product pages.

Also, do try to remove all those !important, it is a bad practice.