How to add navigation menu with text in Brooklyn theme?

Store Design
1

Hello, shopify gurus,

naevis_2-1633766835279.png
naevis_2-1633766835279.png1815Ă—638 186 KB

Navigation menu area opens in the left of my page but I just want a navigation menu with text in the top of my page like this:

naevis_1-1633766821623.png
naevis_1-1633766821623.png704Ă—583 253 KB

This is my development store: https://edeuoey.com/

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

Can anybody help me? Thank you.

1 Like
2

@naevis

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 :slightly_smiling_face:
  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):

and change it to the following:

Then locate this piece (line 63 for me):

and change it to:

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.

3 Likes