Can the border be moved above the menu in the Pipeline theme?

Store Design
,

Topic summary

Goal: move the decorative border from below the menu to above it (under the logo) in the Pipeline theme.

Context: The store URL and a screenshot were shared to illustrate the header layout. The image is important to understand placement.

Proposed approaches (CSS edits in theme.css):

  • Reposition the existing hover/underline element by adjusting .hover__bar:
    • Option 1: .hover__bar { top: 30px !important; }
    • Option 2 (latest): .hover__bar { top: 66%; }
    This shifts the hover bar’s vertical position; percentage vs pixels affects responsiveness based on header height.
  • Add a new top border on the header container: .header__desktop__bar__r { border-top: 5px solid black !important; }
    This creates a persistent line above the menu, independent of hover states.

Notes on terms:

  • .hover__bar: the theme’s hover/active underline element for the menu.
  • .header__desktop__bar__r: a header container class likely controlling the desktop header bar.

Status: No confirmation from the requester that a solution worked; outcome unresolved/ongoing. Action items: try the CSS snippets and adjust values (px/% and border size/color) to match the specific header height and desired placement.

Summarized with AI on January 20. AI used: gpt-5.
1

Hello, is it possible to move the border from under the menu to above the menu (under the logo)?

thanks!

2

Hey, please provide store URL

3

Hello @MonikaBo ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.css file and paste the following code below:

.hover__bar {
    top: 30px !important;
}

Thanks

4

https://homeatfirstsight.co.uk

MonikaBo_0-1692813610825.png
MonikaBo_0-1692813610825.png944×236 27.8 KB

5

Add the following code to the end of your theme.css file.

.header__desktop__bar__r {
    border-top: 5px solid black !important;
}
6

Follow same steps but use this css

.hover__bar {
    top: 66%;
}