How can I move the menu to the top in the Brooklyn theme?

Store Design
1

Hey Y’all, I have the Brooklyn theme and the menu is on the left side. I really want the menu across the top…4 or 5 basic items with drop downs under each. How do I get the menu across the top?

https://senoiatradingcompany.com/

Thank you so much for your help!

2

Hi, @senoiatradingco !

This is Rae from Shopify.

When using the Brooklyn theme, if the main menu takes up too much space, or contains too many characters, it will automatically switch to become a sidebar menu instead. You can check out this help document for more details on this.

However, there are a few simple workarounds that we suggest trying to get the menu to move back to the top of the page instead, such as:

  • Adding no more than four or five items to your main menu. It looks like you currently have five items now, which is generally the maximum we suggest.
  • Adjusting the typography settings on your theme to use a narrower font. This will allow more characters to be used in the available space along the top of your theme.
  • Shortening the titles of your menu items. For instance, looking at your menu titles from the URL you provided, changing ‘DIY Home Decor and Crafts’ to just be called ‘DIY’ would help significantly. Equally, changing ‘Blog, Blog, Blog’ to ‘Blog’ would also be helpful. You can edit these titles directly in your Shopify admin under ‘Online store > Navigation > Main menu’ by selecting the ‘Edit’ button beside each menu item.

I also noticed you have a ‘Search’ menu item on your main menu, despite a search icon being available on the top right hand corner of your site. Removing this menu item may free up enough characters to have the menu switch back to being along the top of your theme, so you might want to try this out.

Keep me posted on how these steps go, and if you have any questions about making the above adjustments!

2 Likes
3

Thank you so much for your assistance! I shortened the 3 menu items, but do not know how to remove the ones at the bottom that are also reflected in the Footer. How do I do this? Thank you!

4

Hi, @senoiatradingco !

Awesome! Thanks for giving the above steps a try.

Taking another peek at your site, it looks like you’re using a secondary sidebar menu, which is a feature on the Brooklyn theme. Since you do already have these menu items linked in your footer, I agree that removing the secondary menu is likely best. To do this, just follow these steps:

  1. Log in to your Shopify admin
  2. Click on ‘Online store > Themes’
  3. Click ‘Customize’ beside your current Brooklyn theme
  4. Click the ‘Sidebar menu’ section
  5. Under ‘Additional menu’ click ‘Remove’
  6. Click ‘Save’ in the top right hand corner

Once you’ve completed these steps, let me know if your menu is looking exactly the way you want, or if you’re hoping to make more changes. I’m happy to continue helping out with this if you still need a hand!

2 Likes
5

Thank you, the footer menu is gone on the sidebar. Now I need the menu
along the top of the page, not on the side. How do I do this? There are 4
items, and 3 of them have drop downs.

I appreciate your assistance so much!

6

Hi, @senoiatradingco !

I’m glad to hear those steps helped!

It’s possible that your menu items still contain too many characters to fit across the top of your page, which is why they are being condensed into the sidebar menu. Looking at your site again, some of the menu titles are still quite long. In particular, ‘Do It Yourself…’ and ‘Love it? Wear it!’ may need to be shortened. Would you consider using titles like ‘DIY’ and ‘Clothing’ for these menu items instead?

Also, did you have a chance to try adjusting the typography settings on your theme? I mentioned this in my initial post here:

Adjusting the typography settings on your theme to use a narrower font. This will allow more characters to be used in the available space along the top of your theme.

Using a narrower font may help free up enough space to move the menu to the top of the page, so it’s definitely worth a try. To do this, just follow these steps.

Let me know how this goes!

1 Like