How can I center the menu in my Sense theme?

Store Design
, ,

Topic summary

A Shopify store owner wants to center their navigation menu in the Sense theme, aligning it with banner text rather than spacing it between the logo and cart/search icons.

Solutions Provided:

Multiple users offered CSS code modifications to base.css:

  • Ujjaval suggested using position: absolute with margin-left: 22% for the header inline menu, plus adjustments to logo max-width
  • oscprofessional provided similar CSS targeting .header--middle-left with absolute positioning
  • Dan-From-Ryviu recommended modifying the grid template around line 3001, changing grid-template-columns to 1fr 1fr 1fr to create equal column spacing

Outcome:

The original poster successfully implemented one of the solutions, though initially encountered an issue where the logo became too small. After clarification about the existing code structure and adjusting the implementation, the problem was resolved and the menu is now properly centered.

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

I would like to centre the menu in my theme to the page, not with equal space between the logo and the cart/search. I want it to line up with the text in the banner. How can I do this?

https://new-wave-ceramics1234.myshopify.com/

2

@newwaveceramics
add below css into base.css file . If you want something like this?

@media screen and (min-width: 990px)
{
.header--middle-left .header__inline-menu {
    position: absolute;
    margin-left: 22%;
}
.header__heading-logo {
    max-width: 126px !important;
}
.header__heading {
    justify-self: left !important;
    position: absolute;
}
}

Ujjaval_0-1680155368489.png
Ujjaval_0-1680155368489.png1587×790 278 KB

3

Hello @newwaveceramics

Try this code if you find it helpful:

Go to Online Store >Theme>Edit code>Assets>base.css>add code at the bottom

@media screen and (min-width: 990px){
.header__heading {
    justify-self: left !important;
    position: absolute;
}
.header__heading-logo {
    max-width: 120px !important;
}
.header--middle-left .header__inline-menu {
    margin-left: 20% !important;
    position: absolute;
}
}
4

Hi @newwaveceramics , you can do that by editing CSS code in Online store > Themes > Edit code > Assets > base.css, find this code around line 3001

.header--middle-left {
grid-template-areas: "navigation heading icons" !important;
grid-template-columns: 1fr 1fr 1fr !important;
}

Change it to like this

.header--middle-left {
grid-template-areas: "heading navigation icons" !important;
grid-template-columns: 1fr 1fr 1fr !important;
}

Then save file and here is the result

Screenshot 2023-03-30 at 14.07.32.png
Screenshot 2023-03-30 at 14.07.32.png1236×607 602 KB

5

That has worked but now my logo is very small and can’t be increased

6

Your preview looks good, but this is what it currently says at 2297:

.header–middle-left {
grid-template-areas: ‘heading navigation icons’;
grid-template-columns: auto auto 1fr;
column-gap: 2rem;
}

7

Looks good but can I get the logo bigger than this?

8

I swapped it out and it’s working. Thank you!