How can I align header elements into one row on the Enterprise theme?

Store Design
, , ,
1

Hi there -

I am currently building a store using the Enterprise theme - which is great, the only problem I have is that I don’t like the layout of the header. It currently has the logo and cart icon on one row, and then has the main navigation on a row below it. I would like for all of these items to align in a single row - with the logo on the left, the menu in the center and cart icon on the right.

However, I can’t seem to nail down how to make these adjustments.

I can identify the elements that need to be moved around - but can’t find a clear understanding of how to re-align them.

Can anyone here point me in the right direction, or even better, provide a code to test out for this desired layout?

Site URL: https://nicole-malachowski.myshopify.com/
PW: paywhi

Screenshot 2023-05-31 221510.png
Screenshot 2023-05-31 221510.png1903×181 13.5 KB

2

Hey @TylerK_Bastion

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Capture.JPG
Capture.JPG1911×131 16 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

I input the code you provided just above the closing tag, however it did not give the desired effect. The menu is now right-aligned, but at the top of the header. Also, perhaps an unintended consequence - the alignment of my slider overlay text is now a little funky.

See attached screenshot for reference.

Screenshot 2023-05-31 224237.png
Screenshot 2023-05-31 224237.png1898×748 185 KB

4

I even tried to revert back to the original, and its keeping the same format?

5

Hey @TylerK_Bastion

No need to worry about it, If you grant me access to your store, I will be able to assist you in setting up the navigation according to your requirements. Please feel free to contact me; I’ll be more than happy to help you with the necessary adjustments.

Best Regards,
Moeed

6

Hi @TylerK_Bastion,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file main..css

Step 3: Paste the below code at the bottom of this file ⇒ save

@media(min-width:767px){
main-menu{
width: fit-content !important;
order:2 !important
}
.header__icons.flex.justify-end.mis-auto.js-closes-menu{order:3 !important}
}

Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly

2 Likes
7

Hello @TylerK_Bastion

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->main.css>Add this code at the bottom.

.main-menu__content {
    justify-content: center !important;
}
.main-nav, .secondary-nav {
    position: absolute;
    top: 40%;
    left: 34%;
}
8

This did the trick - thank you!

9

You are welcome. I’m glad when I can help you :heart_eyes:

10

Would this be the same for dawn theme?

11

So I’m using the same theme, Tried everything- So what I want is main menu should be left , logo should be centered, search bar should be right with cart icon. How to do it? And while scrolling the menu gets hidden and cart went somehow down

https://pf3a27xg6es358b9-88161681693.shopifypreview.com

I tried everything,

12

https://pf3a27xg6es358b9-88161681693.shopifypreview.com

I tried everything,