Main menu in header not centered- Brooklyn Theme

Store Design

Topic summary

A Shopify store owner using the Brooklyn theme encountered an alignment issue with their main menu header. The menu items appeared with a large gap on the left side instead of being centered, and adding a fifth item caused it to move into a sidebar.

Solution Provided:

  • A PageFly representative offered custom CSS code to resolve the centering issue
  • The fix involves editing the theme’s timber.scss file in the code editor
  • The CSS adjusts grid widths, text alignment, and float properties for menu items on screens wider than 769px

Outcome:

  • The solution was successfully implemented and resolved the issue completely
  • The store owner confirmed the fix works perfectly
Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I currently have 4 items in my main menu displayed in the header of my homepage. However, there is a huge gap on the left (please see below where I annotated the gap). Is there a way to have these items centered? Ultimately, I would like to add a 5th but when doing so, Shopify places them in a sidebar. I think if they were properly centered, I could add a 5th item without issue.

Website: www.markkatzphotography.com

Thank you,

Mark

MarkKatzPhotos_0-1675777559686.png
MarkKatzPhotos_0-1675777559686.png1882×913 150 KB

2

Hi @MarkKatzPhotos ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/timber.scss->paste below code at the bottom of the file:

@media screen and (min-width: 769px) {
    .site-header .grid--table > .grid__item.large--one-third {
        width: 20% !important;
    }
    .site-header .grid--table > .grid__item.large--two-thirds {
        width: 80% !important;
    }
    .site-nav.site-nav--init {
        text-align: center;
    }
    .site-nav.site-nav--init li.site-nav__item--compressed {
        float: right;
    }
}

I hope it would help you
Best regards,

Kate | PageFly

1 Like
3

Hi Kate,

This works perfectly. Thank you very much.

Best,

Mark