How can I center my website's main menu?

nvisibl1 · ‎12-13-2023

My main menu is off centre - any idea how I can fix?

toltano.com

Thank you

niraj_patel · ‎12-16-2023

Hello @nvisibl1
This is the code now you can copy paste CSS .

.header{
display: flex !important;
justify-content: space-between;
align-items: center;
}

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Dan-From-Ryviu · ‎12-13-2023

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after <head> element

<style>
@media screen and (min-width: 990px) {
.header--middle-left {
    grid-template-columns: 1fr auto 1fr !important;
}
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

PageFly-Oliver · ‎12-14-2023

Hi @nvisibl1 ,

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
@media screen and (min-width: 990px) {
.header--middle-left {
    grid-template-columns: 150px 1fr 150px !important;
}
}
</style>

Hope my solution works perfectly for you!

Best regards,

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.

nvisibl1 · ‎12-16-2023

Thank you - it didnt quite work though.... the menu items moved a bit but not centred

Thank you

niraj_patel · ‎12-15-2023

hello @Nvisibl1

You can add code by following these steps to change ATC background color

1. Go to Online Store -> Theme -> Edit code.
2. Open your base.css file

3. Paste the below code in base.css file

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

nvisibl1 · ‎12-16-2023

thank you

are you able to send in text so I can copy paste?

niraj_patel · ‎12-16-2023

Hello @nvisibl1
This is the code now you can copy paste CSS .

.header{
display: flex !important;
justify-content: space-between;
align-items: center;
}

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

nvisibl1 · ‎12-16-2023

Great, works perfect - thank you !

GS-Web-Design · ‎03-28-2024

Please Help! Trying to centre Align my menu as it is off centre. It's has the same space between the logo (left) and search/cart (right) but not centre on the screen.

christianm226 · ‎01-30-2025

your a god send - THANK YOU!

websensepro · ‎11-29-2024

Check out our video tutorial if some one is still looking for the solution

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

How can I center my website's main menu?

How can I center my website's main menu?

Community Blog Articles