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

[TylerK_Bastion]

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 

[Moeed]

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 </body> tag.

<style>
@media screen and (min-width: 1024px) {
main-menu.main-menu {
    display: flex;
    justify-content: center;
}
details.main-menu__disclosure.has-motion {
    margin-top: -75px;
}
}
</style>

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

Best Regards,
Moeed

[TylerK_Bastion]

I input the code you provided just above the closing </body> 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.

 

[TylerK_Bastion]

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

[Moeed]

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

[PageFly-Oliver · Accepted solution]

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

[TylerK_Bastion]

This did the trick - thank you!

[PageFly-Oliver]

You are welcome. I'm glad when I can help you 😍

[Bells1]

Would this be the same for dawn theme?

[Shivam_Learning]

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, 

[Shivam_Learning]

https://pf3a27xg6es358b9-88161681693.shopifypreview.com

I tried everything, 

[oscprofessional]

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%;
}