Centre Aligning Menu

[GS-Web-Design]

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. 

0

Report

Reply

[niraj_patel]

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

[GS-Web-Design]

https://df87fa-2.myshopify.com/

[Raj-webdesigner]

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

[GS-Web-Design]

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

[GS-Web-Design]

Perfect! Thank you so much 🙂