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

Solved

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

TylerK_Bastion
Tourist
6 0 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

Accepted Solution (1)

PageFly-Oliver
Shopify Partner
878 190 175

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 9 (9)

Moeed
Shopify Partner
4304 1105 1354

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>

Capture.JPG

 


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

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
TylerK_Bastion
Tourist
6 0 1

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.

 

Screenshot 2023-05-31 224237.png

TylerK_Bastion
Tourist
6 0 1

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

Moeed
Shopify Partner
4304 1105 1354

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

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

PageFly-Oliver
Shopify Partner
878 190 175

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

TylerK_Bastion
Tourist
6 0 1

This did the trick - thank you!

PageFly-Oliver
Shopify Partner
878 190 175

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Bells1
Visitor
2 0 0

Would this be the same for dawn theme?

oscprofessional
Shopify Partner
15938 2383 3092

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

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free