Solved

Centre Aligning Menu

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. 

GSWebDesign_0-1711800740346.png

 

 
 
 
Accepted Solution (1)
Raj-webdesigner
Shopify Partner
268 60 65

This is an accepted solution.

Try This One 

add This Css in your base.css File

@media screen and (min-width:989px){
    nav.header__inline-menu{
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
    }
}
body.gradient header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important;
}
.list-menu--inline {
    justify-content: center;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 6 (6)

techlyser_web
Shopify Partner
1614 299 322

Hello @GS-Web-Design 
Can you share store URL?

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
GS-Web-Design
Tourist
9 0 1

Raj-webdesigner
Shopify Partner
268 60 65

Add This Css In Your Edite code > base.cs File

@media screen and (min-width:990px){
  .header.header--middle-left {
      grid-template-columns: 1fr 1fr 1fr !important;
  }
  nav.header__inline-menu {
     text-align: center !important;
  }
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


GS-Web-Design
Tourist
9 0 1

Hi there,

I applied this code but it did not resolve the issue. It creates an even gap between the logo (left) and search (right) but does not centre the menu with the page

Raj-webdesigner
Shopify Partner
268 60 65

This is an accepted solution.

Try This One 

add This Css in your base.css File

@media screen and (min-width:989px){
    nav.header__inline-menu{
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
    }
}
body.gradient header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important;
}
.list-menu--inline {
    justify-content: center;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


GS-Web-Design
Tourist
9 0 1

Perfect! Thank you so much 🙂