How to Fix Hamburger Menu in Brooklyn Theme for Big Screens like Laptop

Shopify Partner
10 0 1

Hi Shopify!! I'm launching in a few days but before that I would need a few tweaks with my theme to polish it up, so i need your help :(

I'm very very new at coding so i would need a walkthrough on how I can prevent Brooklyn menu bar from turning into a hamburger menu when I try to input 5 menus. I actually want it to be neatly place just beside my logo, and not turn into all hamburger at the side because quite frankly, it doesnt appeal to me. please help me shopify members! :)

Warm Regards,

Mary Joyce Uy

1 Like
Shopify Expert
2648 60 642

Hi MJ

In Brooklyn theme, the site width is hard coded to be 1050 pixels.  This is the maximum width of your header, your product collage/grid, etc... One third of it  is used for shop's logo and the rest is for the menu. The theme calculates the actual width of your menu and if it is wider than this you get a hamburger:) So, your options are:

  1. Try to use shorter words in you menu :) 
  2. Change website width to something larger than 1050. Most laptops have screens at least 1280 pixels wide. Look at this post to learn how to do it.
  3. If your logo is not very big you may try editing your theme to change this one third/two thirds ratio to, say, one quarter for logo and three quarters for menu. 
  4. Or combine any of these options.

To follow the option 3 you have to open your header.liquid  in Sections folder, and locate the following pieces of code (about line 21):

<div class="grid__item large--one-third medium-down--one-half">

and change it to the following:

<div class="grid__item large--one-quarter medium-down--one-half">

Then locate this piece (line 63 for me):

<div class="grid__item large--two-thirds large--text-right medium-down--hide">

and change it to:

<div class="grid__item large--three-quarters large--text-right medium-down--hide">

The change is large--one-third -> large--one-quarter and large--two-thirds -> large--three-quarters.  You may go further and try large--one-fifth and large--four-fifths respectively to gain more space for the menu.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
7 Likes
Shopify Partner
10 0 1

Hi tim!

Again, it worked like a charm! You're a lifesaver Xx

Hope youre having a great holiday!

 

With many thanks,
MJ

0 Likes
Tourist
6 0 1

My man Tim! Your fix worked perfectly.

0 Likes
New Member
11 0 0

Works Great, Thanks!

0 Likes
New Member
4 0 0

Tim, you are a genius

 

0 Likes
New Member
1 0 0

Hi Tim,

Thanks for your sensible response. It helped me in figuring out the issue with simple ease.

 

0 Likes
New Member
7 0 0

HI thanks a lot!

I'd like to do the option 3 but I don't find the file header.liquid

Is it because my version of the brooklyn them is one year old?

Do you know where I could find this ratio?

Thanks a lot

 

Elise

0 Likes
Shopify Expert
2648 60 642

Elise, 

It is highly possible that you have a non-Sectioned version of Brooklyn, and the thread is about Sectioned version.

In this case you may try looking for header.liquid not in Sections, but in Snippets; or the code may be in theme.liquid Layout. 

Unforunately, I have nowhere to  check ...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
1 0 0

Just an update. In the new brooklyn theme the line 

<div class="grid__item large--two-thirds large--text-right medium-down--hide">

has been replaced with

 <nav class="grid__item large--two-thirds large--text-right medium-down--hide" role="navigation">

Change to

<nav class="grid__item large--three-quarters large--text-right medium-down--hide" role="navigation">

0 Likes