How to make hamburger menu in brooklyn theme

Store Design
1

Hey I’m wanting to change my current menu format (which is pictured below) to a small hamburger menu in the corner, if someone can guide me with the coding it would be greatly appreciated.

I’ve attached also i photo of what i want too (the first photo).

@ZestardTech @JHKCreate

@AvadaCommerce

what i want instead
what i want instead462×221 861 Bytes

my current menu that i want to change
my current menu that i want to change1353×401 198 KB

2

@heleneathana

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

hey! thank u so much my the url is featherandthread.com.au

and the p is WMammaquilla03$

thanks again :slightly_smiling_face:

4

@heleneathana

do you have like this

KetanKumar_0-1647834818884.png
KetanKumar_0-1647834818884.png1920×1080 333 KB

5

hey! sorry for the late reply but yes like that without the old menu on the right

6

@heleneathana

yes i can be done some customization code

7

okay cool, what do I put in the edit code to get the hamburger menu?

8

great

your final look like this ?

KetanKumar_0-1648019987328.png
KetanKumar_0-1648019987328.png1920×1080 374 KB

please share your header code

9

yea perfect! whats the header code?

10

@heleneathana

thanks for confirm it can be done custom code

11

what do I need to do?

12

@heleneathana

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.grid__item.large--hide.large--one-sixth.one-quarter {
    display: inline-block !important;
}

.grid__item.large--hide.one-quarter {
    display: inline-block !important;
}

nav.grid__item.large--two-thirds.large--text-right.medium-down--hide {
    display: none;
}

.site-nav--open.site-nav--mobile.site-nav--init {
    display: inline-block !important;
}
h1.site-header__logo.large--left {
    text-align: center;
    display: inline-block;
    width: 100%;
}
.grid__item.large--one-third.medium-down--one-half {
    width: 90%;
}
13

thank you so much! it worked! however are we able to change the menu to a white background with black text?

Screen Shot 2022-03-26 at 4.29.10 pm.png
Screen Shot 2022-03-26 at 4.29.10 pm.png711×727 447 KB

14

@heleneathana

yes, please add this code

.drawer--left {background: #ffffff;}

.mobile-nav__item a, .mobile-nav__toggle button {
    color: #000 !important;
}

.mobile-nav > .mobile-nav__item {
    background: #fff;
}
15

also are you able to remove the privacy, refund, shipping policies and terms of service, about us and contact u? or explain how i can?

Screen Shot 2022-03-26 at 5.10.22 pm.png
Screen Shot 2022-03-26 at 5.10.22 pm.png244×273 3.46 KB

16

@heleneathana

yes, please share header code also please add this code issue on click + sign

.mobile-nav__item a:active, .mobile-nav__item a:focus, .mobile-nav__toggle button:active, .mobile-nav__toggle button:focus {
    background: #fff;
}
17

Thanks! I was wondering can we get rid of the lines between the sub categories? between SHOP, CLOTHING, ARCHIVES but the rest can there be no line?

Screen Shot 2022-03-28 at 10.02.39 am.png
Screen Shot 2022-03-28 at 10.02.39 am.png284×364 3.47 KB

18

@heleneathana

this is idea show sub categories for user do you need all same left line?

19

I like how the lines seperate the main categories but i just want to get rid of them between the sub categories.

Let me know if you can help and what I should put into the code section :slightly_smiling_face:

20

@heleneathana

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.mobile-nav__item:after {border-bottom: 1px solid #c6c6c6;}