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

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

adfarm
New Member
24 0 0

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: 

 

<style>
{% 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 %}
</style>

 

 

 

Reply 1 (1)

Laza_Binaery
Shopify Partner
327 61 90

Hi @adfarm 

 

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

<body class="gradient {{  template.name }} {% if template == "product" %} {{ product.handle }}{% endif %}{% if template == "collection" %} {{ collection.handle }}{% endif %}">

, 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. 

Kind regards
Laza
www.binaery.com