Why isn't my header border color code working?

Store Design

Topic summary

Main issue: A site-wide header bottom border was rendering, but the color (#313131) wasn’t applied—appearing as the background color. Even adding !important didn’t help; oddly, border-top worked correctly.

Early attempts: The OP targeted section.sf-header and #shopify-section-header; another suggestion used a specific Shopify section ID, which affected only the home page.

Troubleshooting: A preview link was shared (later expired), and a screenshot showed the bottom border appearing but in the background color. Requests for more visuals were made.

Resolution: The OP identified the correct selector to modify—“.sf-header header”—which applies site-wide and fixed the color issue.

Key clarifications:

  • CSS selector choice was the root cause; page-specific Shopify section IDs can limit changes to a single template.
  • !important did not resolve the issue due to targeting the wrong element.

Outcome: Resolved; no remaining questions or actions.

Summarized with AI on February 18. AI used: gpt-5.
2

Hi @BobbyB1219 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.