Moving Menu under the Logo In Pipeline Theme

Store Design
, , , ,

Topic summary

A user wants to center their logo and position the navigation menu below it in the Pipeline theme. TaskHusky confirms this layout isn’t natively supported but is achievable through custom CSS editing.

Solution Provided:
Made4uo-Ribe shares custom CSS code to be added to the theme’s stylesheet (base.css/style.css/theme.css):

  • Centers the logo
  • Moves menu below logo
  • Adjusts header layout using flexbox properties

Current Issue:
The CSS modification successfully repositioned the menu, but introduced a new problem: dropdown menu links are now broken. Specifically:

  • Under “CLICK & COLLECT”: PÂTISSERIES and CHOCOLATERIE links don’t work
  • Under “A PROPOS”: First two links are also non-functional

The user has requested additional help to fix the broken dropdown functionality while maintaining the new centered layout.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hello, i would like to modify the header on my pipeline theme. I’d like the logo to be centered, and the menu to appear below it and centered. can’t seem to find a way to do it, can someone help me ? thanx a lot.

img 1 : what it looks like now

img 2 : what i would like it to look like

Capture d’écran 2023-09-01 à 14.26.05.png
Capture d’écran 2023-09-01 à 14.26.05.png998×554 660 KB

Capture d’écran 2023-09-01 à 14.25.58.png
Capture d’écran 2023-09-01 à 14.25.58.png998×552 659 KB

1 Like
2

Hey there -

The Pipeline Theme does not support the menu position you are looking to achieve out of the box. You can see the different positions: https://pipeline.groupthought.com/header/header/header-styles.

It is possible to make this change within the theme. We’ve done it before for merchants.

The question really becomes are you comfortable editing theme, css, and Javascript files?

3

Hi @julo52

Can I take a look? Would you mind to share your Store URL website? with password if its protected. Thanks!

1 Like
4

i wouldn’t say comfortable but i’ve done a bit of editing already, so i’d like to try !

5

https://julo-paris.com/

thanx a lot !

1 Like
6

@Made4uo-Ribe did you have time to have a look ? thanx again

7

Thank you for the information.

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.header__desktop.header__desktop--menu_center {
    flex-direction: column;
}
.header__desktop__bar__l {
    justify-content: center;
}
.header__desktop__bar__c {
    justify-content: center;
}
.header__desktop__bar__r {
    position: absolute;
    right: 100px;
}
8

it worked like magic !

thanx a lot !

9

one quick question,

now some of my links in the menu seem to be broken.

for exemple under “CLICK & COLLECT” the first two links : PÂTISSERIES and CHOCOLATERIE do not work anymore.

do you have any idea why ?

10

@Made4uo-Ribe

it worked like magic, but now links in the menu (the ones that are in drop down menu) seems to be broken.

for exemple under “CLICK & COLLECT” the first two links : PÂTISSERIES and CHOCOLATERIE do not work anymore. and again under “A PROPOS” the first two links do not work either.

do you have any idea why ?

if you have time to look at it i’d appreciate it very much

thanx a lot !!!