Enlarge main menu width in Brooklyn

Solved
Richard_F
Tourist
5 1 1

Hi all

I've read through many threads about this, but none seem to provide the solution. Hope someone can help?

I am trying to increase the width of my main menu width in Brooklyn, so it doesn't go to a hamburger unless it's a particularly narrow screen. I'm looking to add +/- 6 menu items, and if the text would display over 2 lines, then all the better. Like this:

Capture.JPG

 

This is my development store https://bxn4wf4a0vs36r15-56004903084.shopifypreview.com

This is an example store of how I would like the main menu to display https://objectsandfinds.com/

 

Thanks in advance

Richard

 

0 Likes
Natztech
Shopify Partner
846 230 627

hello @Richard_F  
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

@media only screen and (min-width: 1440px){

#shopify-section-header .site-header  .grid--table {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

#shopify-section-header .site-header .grid--table .grid__item {
    display: inline-block;
}

#shopify-section-header .large--one-third {
    width: 15% !important;
}

#shopify-section-header .large--two-thirds {
    width: 85% !important;
}

.site-header .wrapper {
    max-width: 1400px !important;
    margin: 0 auto;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Richard_F
Tourist
5 1 1

Hi

I'm afraid that doesn't appear to work. Perhaps it's because of the size of my laptop screen, and that's causing the hamburger to appear? (I'm on a new Dell XPS 13")

I have theme.scss in Assets, not theme.css, is that also perhaps causing the problem?

Thanks

Richard

 

 

 

0 Likes
Richard_F
Tourist
5 1 1

This is an accepted solution.

Thanks for this.

I've amended the first line of your code update to read @media only screen and (min-width: 1200px){ rather than @media only screen and (min-width: 1440px){ and it now works as you'd hoped.

Thanks again for your help!

0 Likes