Solved

How can I center my website's main menu?

nvisibl1
Explorer
83 2 17

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

 

toltano.com

 

Thank you

Accepted Solution (1)
techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

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

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

Techlyser || 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

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
7577 1466 1464

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 or Accept solution! - Buy me a codefee 🙂
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PageFly-Oliver
Astronaut
861 180 161

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
Explorer
83 2 17

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

 

Thank you

techlyser_web
Shopify Partner
1423 268 282

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

 

techlyser_web_1-1702635018428.png

 

 

Techlyser || 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
Explorer
83 2 17

thank you

 

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

techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

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

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

Techlyser || 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
Explorer
83 2 17

Great, works perfect - thank you !

GS-Web-Design
Tourist
9 0 1

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. 

Screenshot 2024-03-28 at 6.01.55 pm.png