Separator bar under header

Solved

Separator bar under header

silenceclothing
Explorer
132 0 17

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_1-1736770372356.png

 

Accepted Solution (1)
DaisyVo
Shopify Partner
3796 412 499

This is an accepted solution.

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 </head>

 

{% 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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 4 (4)

DaisyVo
Shopify Partner
3796 412 499

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
 
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
silenceclothing
Explorer
132 0 17

did not work

this message pops up

silenceclothing_0-1736771699502.png

 

DaisyVo
Shopify Partner
3796 412 499

This is an accepted solution.

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 </head>

 

{% 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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
silenceclothing
Explorer
132 0 17

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