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

New Member
2 0 0

Hello Tim,

 

Actually I prefer the Hamburger Icon over the Pull Down Menus.

So I performed the opposite of procedure you suggested for MJ.

 

What I learned about Brooklyn is:

>When the menu on Navigation has 5 or less items, the Pull Down Menu appears.

>At 6 items or more placed into the menu on Navigation, the Hamburger Icon remains in place with no Pull Down Menus.

 

This is awesome to know about the Brooklyn Theme having hard wired widths in the Header as you have informed us.

 

Additionally, it is currently my daughter informed me that people are beginning to joke about the Hamburger Icon.

So I found a way to add the text "Menu" to my Hamburger Icon.  This addition was through CSS editing.

(I'm not a CSS expert or anything close to being one.)

 

In Brooklyn's Header.Liquid at line 68, I added Menu

 

61      <header class="site-header" role="banner">
62      <div class="wrapper">
63      <div class="grid--full grid--table">
64      <div class="grid__item large--hide large--one-sixth one-quarter">
65      <div class="site-nav--open site-nav--mobile">
66      <button type="button" class="icon-fallback-text site-nav__link site-nav__link--burger js-drawer-open-button-left" aria-controls="NavDrawer">
67      <span class="burger-icon burger-icon--top"></span>
68      <span class="burger-icon burger-icon--mid">menu</span>
69      <span class="burger-icon burger-icon--bottom"></span>
70      <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span>
71       </button>

 

Again, thank you Tim,

 

RGR with a Shopify store by another name

0 Likes
Highlighted
New Member
2 0 0

Hi there, Was just wondering if you had any success making the nav even wider. Say 8 items wide? And what the code would be for this? We currently have seven items and am using the below:

 

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


 
<nav class="grid__item large--five-sixths large--text-right medium-down--hide" role="navigation”>

 

Thanks in advance!

0 Likes
New Member
2 0 0
Hello,
and I appreciate your concern.
Wider Hamburger Icon, is this your desire?

As of this time I have no answer but I wanted to reply to you quickly.

Soon (couple of weeks or so during this holiday season) I will research
changing the color of my Hamburger Icon.

I like what might be your preference in having a wider Hamburger Icon.
It’s a good idea.

I’ll look into both topics for CSS Code for the Brooklyn theme.
If you discover the CSS Code before I do, please let me know.

Happy Holidays,
RGR

0 Likes
New Member
2 0 0

Hi there, Was just wondering if you had any success making the nav even wider. Say 8 items wide? And what the code would be for this? We currently have seven items and am using the below:

 

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


 
<nav class="grid__item large--five-sixths large--text-right medium-down--hide" role="navigation”>

 

Thanks in advance!

0 Likes