Pipeline theme - move menu below logo, but keeping icons with logo

Store Design
, , , ,
1

Hi, I would like my logo to be centered above my navigation menu, and I saw another post that shared code to do this. The code I used is:

.header__desktop {

flex-direction: column *!important*;

}

.header__desktop__bar__r {
flex: 1 0 0;
justify-content: center !important;
}

.header__desktop__bar__l {
flex: 1 0 0;
justify-content: center !important;
}

However I would like my Account/Search/Cart icons to stay in-line with the logo like this:

image
image893×121 45.6 KB

With that code above, I am getting this instead, where the icons are centered along with the menu:

image
image1633×104 18.6 KB

Can anyone help me get my icons aligned top-right with my logo instead? Thank you.

3 Likes
2

Hi @omwl

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

Hello @omwl,

Can you share your store URL and password (If any) so that I can check the store?

5

@EFOLI-Syn @devcoders it’s an unpublished theme unfortunately. How can I share that? It’s the basic Pipeline theme though, I haven’t made any changes apart from that excerpt of code I shared in the original post.

My current website is on Prestige theme www.oncemorewithlove.com and is how I want it to look (icons in-line with logo, not the nav menu)

image
image2258×260 26.7 KB

6

Hey,

I can see you just shared the link of live site instead of the preview link where you need modification.

For this you need to share the preview link of the specific theme you are are working on.

Here I show you below on how to copy the preview link of any Draft theme. Follow the steps shared below.

Go to Shopify Admin >> Online Store >> Themes >> Click the three dots of the Draft theme for which you need to copy the preview link. >> Click on Preview >> Once you preview the theme then you will see a bar for the Draft theme in the Bottom >> Now click on Copy Link Icon.

Here is the visual explanation shared below.

image
image1919×947 144 KB

copy-link
copy-link1911×956 116 KB

Once you copy this preview link then share it with us.

Cheers :slight_smile:

7

thank you so much! Here is the preview link:

8

Thanks for sharing it with me.

I see the issue with the layout. But it need to take a look into your theme file. Could you please share your store collab code so that I can implement the requested changes.

Here is how you can find the collab coed.

Login to your Shopify Admin.

  • In the bottom-left corner, click on Settings.
  • Click Users and permissions.
  • Scroll down to the Collaborators section.
  • You’ll see a Collaborator request code — it’s usually a 4-digit number (e.g., 1234).
  • Copy that code and send it to me here.

Once you found then share it with me.

Thanks

9

It’s 7717. Thank you so much.

I deleted the code excerpt in my original post by the way, so my theme is back to what the original Pipeline code is.

If you want to see what the code does, you can add it back in:

.header__desktop {

flex-direction: column *!important*;

}

.header__desktop__bar__r {
flex: 1 0 0;
justify-content: center !important;
}

.header__desktop__bar__l {
flex: 1 0 0;
justify-content: center !important;
}

10

Just send you request accept it.

11

Accepted! I hope I did it right, I selected online store editor role.

12

Thank you.

Now I have!