How can I keep my main menu centred in Dawn theme?

Nabibi
Tourist
22 0 3

I'm looking to add some code that will keep my main menu centred when the page is too small for the entire menu to remain on one line. So instead of the current setup which has the second row starting from left to right, can the bottom row be centred?

 

Thank you in advance. 

mmnc.JPG

 

 

 

Replies 9 (9)

dmwwebartisan
Shopify Partner
12280 2546 3694

@Nabibi 

Please share stroe URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Nabibi
Tourist
22 0 3

https://imyselfandme.com/

This is the store URL but I am working on a theme that isn't live yet. 

dmwwebartisan
Shopify Partner
12280 2546 3694

@Nabibi 

i think add all menu under "shop" menu

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Nabibi
Tourist
22 0 3

Sorry I don't quite understand what you mean by this.

dmwwebartisan
Shopify Partner
12280 2546 3694

@Nabibi 

  1. In your Shopify Admin go to:  online store > themes > actions > edit code.

2. Find  Asset > theme.scss.liquid  and paste this at the bottom of the file. 

 

@media only screen and (min-width: 750px){
nav.medium-up--one-half { width: 80% !important;}
.site-header .medium-up--one-quarter { width: 10% !important;}
nav button{ font-size: 15px !important;}
}

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Nabibi
Tourist
22 0 3

I'm afraid this has not worked. The second row of the menu still aligns from the left.

dmwwebartisan
Shopify Partner
12280 2546 3694

@Nabibi 

  1. In your Shopify Admin go to:  online store > themes > actions > edit code.

  2. Find  Asset > theme.scss.liquid  and paste this at the bottom of the file. 

 

.site-nav { text-align: left !important;}

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Nabibi
Tourist
22 0 3

Thanks for the help so far but I'm afraid this still does not work.

dmwwebartisan
Shopify Partner
12280 2546 3694

Ok , add provide css code to your css file . i will check and send coorect solution for you.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app