Brooklyn Theme - how to remove hamburger menu and only use page navigation

New Member
1 0 0

Need assistance with disable/remove hamburger menu and only use page navigation menu at top of website.
I've reduced the words down as some blogs have suggested but still have the same layout. 


Shopify Staff
Shopify Staff
653 42 99

Hello there! 

This is Ren from the Shopify support team, here to help out.

With Brooklyn, there is a very hard limit to the size of the navigation menu and if too long, it will automatically revert to a hamburger menu no matter what. If you've exhausted all you can in terms of reducing characters/words, you can also try making some changes to your typography. Decrease the font size and also play around with the different font types to find one that is smaller. 

Another option would be to consolidate some of your menu items into a drop-down. Here's how to do that. 

The final and more drastic option would be to select a new theme altogether and simply build/work on it in the background (unpublished) until it's ready to go.

et me know what you think of those options and if I can help clarify any of that for you! How are things going with your business?

Are you finding any other pain points that I can help you address? 

Ren | Social team @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

New Member
1 0 0

Hi @AndyLIz ,

I came up with this very easy solution that I hope will be useful for everyone, I think it can apply to all free themes:

Schermata 2020-10-27 alle 12.26.41.jpg

Go to Online Store > Themes and from the Actions dropdown, choose Edit Code. Then, open Sections / header.liquid and look around line 126.
Now Add 
{% comment %} before the tag <button> and  {% endcomment %} after the </button>.

This is after we add it:




 {% comment %}
                <button type="button" class="icon-fallback-text site-nav__link site-nav__link--burger js-drawer-open-button-left" aria-controls="NavDrawer">
                  <span class="burger-icon burger-icon--top"></span>
                  <span class="burger-icon burger-icon--mid"></span>
                  <span class="burger-icon burger-icon--bottom"></span>
                  <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span>
 {% endcomment %}




After you do this don't forget to add a navigation to your product pages at least adding breadcrumbs. Check this guide.

Giuseppe Spagnuolo | Founder @ uxbly