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
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
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

hi can youScreenshot from 2019-12-13 14-58-46.png help with my problem? I'm a bit having problems with the header, the problem is when I enter laptop mode, my website goes into mobile mode

0 Likes

@mochdiaz,

Please share your site password so that I will check and give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
2 0 0

oh sorry, here's the password: miegoreng

0 Likes

@mochdiaz,

Do you want this in laptop

2019-12-13_14-43.jpg

 

This happened because your navigation menus are more...

For that please decrease navigation menu or manage width of navigation,logo and cart block properly

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes