Separator bar under header

Store Design
, ,
1

currently my header is transparent on my homepage but color on hover and scrolldown. I also managed to make a separator bar under the header when scroll down, but i want it to show when hover, and also when i am on all the other pages. Does anyone know how to do this?

silenceclothing_0-1736770356100.png
silenceclothing_0-1736770356100.png1887×149 18.2 KB

silenceclothing_1-1736770372356.png
silenceclothing_1-1736770372356.png1885×249 247 KB

2

Hi @silenceclothing

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
footer.footer,
.shopify-section.shopify-section-group-header-group.announcement-bar-section {
    background: #252525;
}

I hope this helps

Best,

Daisy

3

did not work

this message pops up

silenceclothing_0-1736771699502.png
silenceclothing_0-1736771699502.png1858×1059 341 KB

4

Hi @silenceclothing

Please try this way

In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above 

{% style %}
sticky-header.header-wrapper:hover {
    border-bottom: 1px solid white !important;
}
{% if template.name != "index" %}
sticky-header.header-wrapper.gradient.header-wrapper--border-bottom {
    border-bottom: 1px solid white !important;
}
{% endif %}
{% endstyle %}

I hope this helps

Best,

Daisy

5

thank you so much, you have helped me alot today!

1 Like