Place the menu pages in the centre between logo and cart

Store Design
, ,

Topic summary

Issue: User wants to reposition three menu pages in the header to be centered between the logo (left) and cart icon (right).

Solutions Provided:

Multiple CSS approaches were offered:

  • BrewBrains suggested modifying .header__inline-menu with max-width: 30%, margin-left: 0px, and justify-self: center

  • niraj_patel (two solutions):

    1. Adjust grid template columns and menu margins in theme.liquid
    2. Media query approach for screens 768px+ with margin-left: 826px on the inline menu

  • Raj-webdesigner recommended adding CSS to base.css targeting grid row, alignment properties, and removing margins

Status: Multiple working solutions presented with screenshots. User clarified wanting logo and cart to remain in original positions with menu centered between them. All solutions involve adding custom CSS to theme files.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Can you help me place the three pages in the header, between the logo and cart (center). Thank you

Pass: biangu

Url: www.matibrnd.com

MT27_1-1711126957667.png
MT27_1-1711126957667.png776×442 421 KB

2

HI @MT27 ,

You can use the CSS below and It should work. See the screenshot below for the result.

#shopify-section-header .header nav.header__inline-menu {
    max-width: 30%;
    margin-left: 0px !important;
    justify-self: center;
}

#shopify-section-header h1.header__heading {
    text-align: left;
    justify-self: left;
    grid-area: unset;
}

Screenshot 2024-03-22 at 11.14.00 PM.png
Screenshot 2024-03-22 at 11.14.00 PM.png2838×260 550 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hello @MT27

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.header { grid-template-columns: 0fr 1fr 1fr !important; } #shopify-section-header .header__inline-menu { margin-left: 0 !important; } .header--top-center .header__heading { justify-self: start !important; }

techlyser_web_0-1711128935617.png
techlyser_web_0-1711128935617.png1323×338 463 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

4

Hi. sorry if i was not vary clear. I meant to keep the logo and the cart in the position they were and place the three pages in the middle between them.

Thank you

5

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media (min-width: 768px){ #shopify-section-header .header__inline-menu { margin-left: 628px !important; } }

techlyser_web_0-1711135420619.png
techlyser_web_0-1711135420619.png1318×338 464 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

6

Put This Code On Go to Online Store → Theme → Edit code → base.css
This Css On Your Given Data First 3page Logo and Cart…

#shopify-section-header .header__inline-menu {
    margin: 0 !important;
    grid-row: 1;
    grid-column: 1;
}
a.header__menu-item.list-menu__item.link.link--text.focus-inset {
    margin: 0 !important;
}
.header__icons {
    justify-self: center;
}
.list-menu--inline{
    align-items: center !important;
}