Shopify themes, liquid, logos, and UX
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>
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025