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

[klave]

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.

[klave]

Bump, can someone help me? 🙂

[KetanKumar]

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.

[klave]

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

Password is: pwdick

[KetanKumar]

@klave 

Sorry, your password doesn't work

[klave]

My bad, its: owdick

[KetanKumar]

@klave 

no, worries 

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

[klave]

Yes

[KetanKumar]

@klave 

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

[UmairA]

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 <button> 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 <button></button> tag we talked about in the 2nd option. 

5) You'll need to enclose the <a></a> tag inside of button i.e <button><a></a></button> instead of <a><button></button></a>

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.

[KristinaE]

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

[KetanKumar]

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

[KristinaE]

Thank you!

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

[KetanKumar]

@KristinaE 

Thanks 

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

[KristinaE]

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

{%- style -%}
  {%- assign logo_max_width = section.settings.logo_max_width -%}
  {%- assign header_color = section.settings.header_color -%}

  {%- if section.settings.transparent_header_enable and request.page_type == 'index' -%}
    {%- assign header_color_transparent = section.settings.transparent_header_color -%}

    .header-wrapper.header-wrapper--transparent .site-nav__link,
    .header-wrapper.header-wrapper--transparent .site-header__logo a {
      color: {{ header_color_transparent }};
    }

    .header-wrapper.header-wrapper--transparent .site-header__logo a:hover,
    .header-wrapper.header-wrapper--transparent .site-nav__link:hover,
    .header-wrapper.header-wrapper--transparent .site-nav__link:focus,
    .header-wrapper.header-wrapper--transparent .site-header__logo a:focus {
      color: {{ header_color_transparent | color_modify: 'alpha', 0.75 }};
    }

    .header-wrapper.header-wrapper--transparent .site-nav--has-dropdown.nav-hover > .site-nav__link {
      color: {{ header_color }};
    }

    .header-wrapper.header-wrapper--transparent .burger-icon,
    .header-wrapper.header-wrapper--transparent .site-nav__link:hover .burger-icon {
      background: {{ header_color_transparent }};
    }
  {%- endif -%}

  .header-wrapper .site-nav__link,
  .header-wrapper .site-header__logo a,
  .header-wrapper .site-nav__dropdown-link,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a,
  .header-wrapper .site-nav--has-dropdown:hover > a {
    color: {{ header_color }};
  }

  .header-wrapper .site-header__logo a:hover,
  .header-wrapper .site-header__logo a:focus,
  .header-wrapper .site-nav__link:hover,
  .header-wrapper .site-nav__link:focus,
  .header-wrapper .site-nav--has-dropdown a:hover,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:hover,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:focus,
  .header-wrapper .site-nav--has-dropdown .site-nav__link:hover,
  .header-wrapper .site-nav--has-dropdown .site-nav__link:focus,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a:hover,
  .header-wrapper .site-nav__dropdown a:focus {
    color: {{ header_color | color_modify: 'alpha', 0.75 }};
  }

  .header-wrapper .burger-icon,
  .header-wrapper .site-nav--has-dropdown:hover > a:before,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:before,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a:before {
    background: {{ header_color }};
  }

  .header-wrapper .site-nav__link:hover .burger-icon {
    background: {{ header_color | color_modify: 'alpha', 0.75 }};
  }

  .site-header__logo img {
    max-width: {{ logo_max_width | append: 'px' }};
  }

  @media screen and (max-width: 768px) {
    .site-header__logo img {
      max-width: 100%;
    }
  }
{%- endstyle -%}
<div data-section-id="{{ section.id }}" data-section-type="header-section" data-template="{{ request.page_type }}">
  <div id="NavDrawer" class="drawer drawer--left">
    {% include 'drawer-menu' %}
  </div>
  <div class="header-container drawer__header-container">
    <div class="header-wrapper" data-header-wrapper>
      {% if section.settings.show_announcement %}
        {% if section.settings.home_page_only == false or request.page_type == 'index' %}
          <style>
            .announcement-bar {
              background-color: {{ section.settings.color_bg }};
            }

            .announcement-bar--link:hover {
              {% assign brightness = section.settings.color_bg | color_brightness %}

              {% if brightness <= 192 %}
                {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
                background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
              {% else %}
                {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
                background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
              {% endif %}
            }

            .announcement-bar__message {
              color: {{ section.settings.color_text }};
            }
          </style>

          {% if section.settings.link == blank %}
            <div class="announcement-bar">
          {% else %}
            <a href="{{ section.settings.link }}" class="announcement-bar announcement-bar--link">
          {% endif %}

            <p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

          {% if section.settings.link == blank %}
            </div>
          {% else %}
            </a>
          {% endif %}

        {% endif %}
      {% endif %}

      <header class="site-header" role="banner"{% if section.settings.transparent_header_enable %} data-transparent-header="true"{% endif %}>
        <div class="wrapper">
          <div class="grid--full grid--table">
            <div class="grid__item large--hide large--one-sixth one-quarter">
              <div class="site-nav--open site-nav--mobile">
                <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>
                </button>
              </div>
            </div>
            <div class="grid__item large--two-thirds medium-down--one-half">
              {% comment %}
                Use the uploaded logo from theme settings if enabled.
                Site name gets precedence with H1 tag on homepage, div on other pages.
              {% endcomment %}
              {% if request.page_type == 'index' %}
                <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% else %}
                <div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% endif %}
                {% capture image_size %}{{ logo_max_width | escape }}x{% endcapture %}

                <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
                  {% if section.settings.logo %}
                    <img class="site-header__logo-image" src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

                    {% if request.page_type == 'index' and section.settings.transparent_header_enable %}
                      {% if section.settings.transparent_logo == blank %}
                        {%- assign transparent_logo = section.settings.logo -%}
                      {% else %}
                        {%- assign transparent_logo = section.settings.transparent_logo -%}
                      {% endif %}

                      <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">
                    {% endif %}
                  {% else %}
                    {{ shop.name }}
                  {% endif %}
                </a>
              {% if request.page_type == 'index' %}
                </h1>
              {% else %}
                </div>
              {% endif %}
            </div>
            <nav class="grid__item large--two-thirds large--text-right medium-down--hide" role="navigation">
              {% comment %}
                List out your main-menu linklist (default)

                More info on linklists:
                  - http://docs.shopify.com/themes/liquid-variables/linklists
              {% endcomment %}
              <!-- begin site-nav -->
              <ul class="site-nav" id="AccessibleNav">
                {% for link in linklists[section.settings.main_menu_link_list].links %}
                  {% if link.links != blank %}
                  {% assign parent_index = forloop.index %}
                    <li
                      class="site-nav__item site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
                      aria-haspopup="true"
                      data-meganav-type="parent">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="parent"
                        aria-controls="MenuParent-{{ parent_index }}"
                        aria-expanded="false"
                        {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                          <span class="icon icon-arrow-down" aria-hidden="true"></span>
                      </a>
                      <ul
                        id="MenuParent-{{ parent_index }}"
                        class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
                        data-meganav-dropdown>
                        {% for childlink in link.links %}
                          {% if childlink.links != blank %}
                          {% assign child_index = forloop.index %}
                            <li
                              class="site-nav__item site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                              aria-haspopup="true">
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                data-meganav-type="parent"
                                {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                                  <span class="icon icon-arrow-down" aria-hidden="true"></span>
                              </a>
                              <div class="site-nav__dropdown-grandchild">
                                <ul
                                  id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                  data-meganav-dropdown>
                                  {% for grandchildlink in childlink.links %}
                                    <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                                      <a
                                        href="{{ grandchildlink.url }}"
                                        class="site-nav__dropdown-link"
                                        data-meganav-type="child"
                                        {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                                        tabindex="-1">
                                          {{ grandchildlink.title | escape }}
                                        </a>
                                    </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            </li>
                          {% else %}
                            <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                data-meganav-type="child"
                                {% if childlink.active %}aria-current="page"{% endif %}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                              </a>
                            </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    </li>
                  {% else %}
                    <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="child"
                        {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}

                {% comment %}
                  Remove comment tags below to add a search box to your header, visible on screens where your header menu
                  is displayed inline.
                  <li class="site-nav__item site-nav--search__bar medium-down--hide">
                    {% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--header' %}
                  </li>
                {% endcomment %}
                {% if shop.customer_accounts_enabled %}
                  <li class="site-nav__item site-nav__expanded-item site-nav__item--compressed">
                    <a class="site-nav__link site-nav__link--icon" href="{{ routes.account_url }}">
                      <span class="icon-fallback-text">
                        <span class="icon icon-customer" aria-hidden="true"></span>
                        <span class="fallback-text">
                          {% if customer %}
                            {{ 'layout.customer.account' | t }}
                          {% else %}
                            {{ 'layout.customer.log_in' | t }}
                          {% endif %}
                        </span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                
                
                
                
                
                
                
                
                {% if section.settings.search == 'page' or section.settings.search == 'modal' %}
                  {% assign search_modal = true %}
                  {% if section.settings.search == 'page' %}
                    {% assign search_modal = false %}
                  {% endif %}
                  <li class="site-nav__item site-nav__item--compressed">
                    <a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                <li class="site-nav__item site-nav__item--compressed">
                  <a href="{{ routes.cart_url }}" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
                    <span class="icon-fallback-text">
                      <span class="icon icon-cart" aria-hidden="true"></span>
                      <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                    </span>
                    <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                  </a>
                </li>

              </ul>
              <!-- //site-nav -->
            </nav>
            <div class="grid__item large--hide one-quarter">
              <div class="site-nav--mobile text-right">
                
                
                
                
                
                
                
                
                <a href="{{ routes.cart_url }}" class="site-nav__link cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
                  <span class="icon-fallback-text">
                    <span class="icon icon-cart" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                  </span>
                  <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                </a>
              </div>
            </div>
          </div>

        </div>
      </header>
    </div>
  </div>
</div>

[KetanKumar]

@KristinaE 

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

[KetanKumar]

@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;
}

[KristinaE]

It worked! Thank you so much!

[KetanKumar]

@KristinaE 

Thanks of yuor feedback ans support

[radsoapco]

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