How to make separating line full width of nav menu?

Store Design
, ,

Topic summary

A user added a separator line above their navigation menu, but it doesn’t extend to full screen width like the line below it does.

Current Implementation:

  • The separator is added via theme.liquid file
  • Uses a <div> with inline styling (border-top: 1px solid #000000)

Suggested Solution:

  • Locate the separator element in header.liquid or sections/header.liquid
  • Apply CSS to force full viewport width using width: 100vw
  • Additional properties recommended: margin: 0, padding: 0, position: relative, left: 0

Current Status:
The original poster cannot locate the suggested code structure in their files and has shared their existing implementation for further guidance. The issue remains unresolved.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have added a separating line above my nav menu but it does not fill the screen like the one below it.

How can I make it the same width as the line underneath?

Thanks

URL: www.atmos.art

Screenshot 2025-06-05 at 18.43.40.png
Screenshot 2025-06-05 at 18.43.40.png3456×270 20.3 KB

2

Hi,

Hope this will work

  • Find Right File (header.liquid or sections/header.liquid)
  • Locate Your Top Separator Line
    Example -
    or
  • Use CSS to make it full width

CSS Example

.top-separator {
  width: 100vw; /* 100% of the screen width */
  height: 1px;
  background-color: #000; /* or whatever color your line is */
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  left: 0;
}
3

Hi,

I can’t find those lines of code. Here is the code I am currently using to add a separator line above if that helps. It is in the theme.liquid file.