Hello,
I have coded my header so that it is transparent until you hover over it, then it turns to a solid colour. I like this style for my home page where I have an image banner behind it, but for example on my product page and contact page I do not want this hover feature and want it to stay solid colour entirely. Does any one know the code to turn off this feature for certain pages? See screenshot of code in my base.css
Any help would be much appreciated,
Thank you in advance,
Ella.
URL: https://www.livwithin.com.au/
PW: pewpog
1 Like
Please wrap your code into the code below and add code to the theme.liquid file, after so the code will be applied to the homepage only
{% if template == 'index' %}
{% else %}
1 Like
Hi,
Please add this js to your theme js file(view-source:https://www.livwithin.com.au/cdn/shop/t/4/compiled_assets/scripts.js) end line. your issue will be solved. I have tested.
jQuery(document).ready(function() {
if (window.location.pathname.includes("/contact") || window.location.pathname.includes("/products")) {
jQuery("head").append("");
}
});
Hi, Just remove the following code from you attached location.
.header-wrapper:hover, .header-wrapper.header-menu-open {
background: #ff0045 !important;
}
then just add the following code to layout > theme.liquid just above to the Tag.
{% if template == 'index' %}
{% endif %}
thanks dan, this worked perfectly
1 Like
