Mobile dropdown menu only appears when clicking on "+" Brooklyn theme

Store Design
1

When im on my phone and trying to navigate through the sidebar menu i have to click on the “+” for it to dropdown, and it gets kinda confusing when you try to navigate. Are there any way to make it show to dropdown menu when you press on the text instead of only the “+”?

Im using the brooklyn theme.

1 Like
2

Bump, can someone help me? :slightly_smiling_face:

3

Hello, @klave

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

4

https://tear-tech.myshopify.com/

Password is: pwdick

5

@klave

Sorry, your password doesn’t work

KetanKumar_0-1606424982635.png
KetanKumar_0-1606424982635.png1920×1080 192 KB

6

My bad, its: owdick

7

@klave

no, worries

do you like also to click text open to the dropdown right?

8

Yes

9

@klave

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

10

Hey @klave ,

I’ve done exactly what you want for someone before (using the Venture theme) and I remember how I did it but don’t have the code now. It’s a little bit complex but you can give it a try yourself by following the steps below.

  1. Go to edit theme code > Sections > header.liquid

  2. Find tag with class “mobile-nav__toggle-btn”

  3. Find the <a tag with class “mobile-nav__link”

  4. You’ll see that the <a tag is enclosing the tag we talked about in the 2nd option.

  5. You’ll need to enclose the tag inside of button i.e instead of

Note: You might need to look into snippets embedded in the header.liquid file such as mobile-nav.liquid and you may also need to do some CSS fixes as it will change the design to some degree.

Hope that helps.

You can message me if you need my help with it.

11

I would also like dropdown to show by clicking the text instead of only the “+”! Can somebody help me out?

1 Like
12

@KristinaE

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

1 Like
13

Thank you!

https://kpr45n3ien8nuaez-50272534682.shopifypreview.com/
PW: whopra

1 Like
14

@KristinaE

Thanks

can you please share your header section code or mobile menu, site-nave do you any code?

1 Like
15

Sorry, I’m new to all of this.. do you mean the header-liquid?

Show More 

{% include 'drawer-menu' %}

{% if section.settings.show_announcement %} {% if section.settings.home_page_only == false or request.page_type == 'index' %} {% if section.settings.link == blank %}
{% else %}{% endif %}

{{ section.settings.text | escape }}

{% if section.settings.link == blank %}
{% else %} {% endif %} {% endif %} {% endif %}
1 Like
16

@KristinaE

Thanks, code but i can’t see the mobile menu code do you have any other file for a mobile menu?

1 Like
17

@KristinaE

I have to find another solution can you please try this

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.mobile-nav__has-sublist .mobile-nav__link {position: relative;}
.mobile-nav__toggle {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 100%;
}

.mobile-nav__toggle .mobile-nav__toggle-btn {
    width: 100%;
}

.mobile-nav__toggle button:active, .mobile-nav__toggle button:focus {
    background: transparent;
}

.mobile-nav__toggle .mobile-nav__toggle-btn span {
    float: right;
}

:focus {
    outline: none;
}
1 Like
18

It worked! Thank you so much!

1 Like
19

@KristinaE

Thanks of yuor feedback ans support

1 Like
20

For the “main menu” button in your navigation bar add a “#”instead of a link, now when someone clicks that button not just the arrow it will make the drop down happen