Centre Aligning Menu

Store Design
, ,
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
GSWebDesign_0-1711800740346.png998×187 174 KB

0

Report

Reply

2

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

3

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

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

5

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

6

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

Perfect! Thank you so much :slightly_smiling_face: