Separator bar under header

Store Design
, ,

Topic summary

A user seeks to add a separator bar under their header in specific scenarios:

Current state:

  • Transparent header on homepage
  • Header gains color on hover and scroll
  • Separator bar appears only on scroll

Desired behavior:

  • Separator bar should display on hover
  • Separator bar should appear on all non-homepage pages

Solution provided:

Initial CSS suggestion for the Custom CSS section failed with an error message (shown in screenshot).

Working solution:

  • Edit theme.liquid file in theme code editor
  • Insert custom CSS code above </head> tag
  • Code adds white border on hover and conditionally displays it on non-index pages using Liquid template logic

Outcome: Issue resolved successfully. The user confirmed the solution worked after implementing the theme.liquid modification.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
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