How to make the main nav menu title open the submenu on touch in mobile version Broadcast theme

[ShtokyD]

Hi smart people! I’m trying to make the main nav menu titles (called “Store” and “My Works” on the screenshots) open the submenu on touch in mobile version Broadcast theme like the small arrows do next to the titles (right now the drop down only opens when I touch the small arrows icons highlighted in red circles).

Is it something to do with this code in the nav-item.liquid:

<li class="{% if grandparent or has_megamenu %}grandparent kids-{{ child_count }}{% elsif parent %}parent{% else %}child{%endif%} {% if link.current %}main-menu--active{% endif %}">
  <a href="{{ link.url }}" class="nav-link">
    {{ link.title | escape }}
    {% if parent or grandparent or has_megamenu %}<span class="nav-carat-small" tabindex="0">{% render 'icon-arrow-right' %}</span>{% endif %}
  </a>
  {% if parent or grandparent or has_megamenu %}
    <a href="#" class="nav-carat" data-aria-toggle aria-haspopup="true" aria-controls="{{ link_id }}" aria-expanded="false">
      <span class="visually-hidden">+</span>
      {% render 'icon-arrow-right' %}
    </a>

    <div class="main-menu-dropdown {% if has_megamenu %}main-menu-dropdown--megamenu{% endif %} {% if parent or grandparent %}main-menu-dropdown--has-links{% endif %}" id="{{ link_id }}">
      <ul>
        {%- if has_megamenu -%}
          {{ megamenu }}
        {%- endif -%}

        {%- if parent or grandparent %}
          {% for link in link.links %}
            {%- assign toplevel = false -%}
            {% render 'nav-item', link: link %}
          {% endfor %}
        {% endif %}
      </ul>
    </div>
  {% endif %}
</li>

or something with this in the theme.scss.liquid:

/*================ Touch ================*/
@include media-query($small) {
  .navigation__wrapper{
    display: none;
    position: absolute;
    width: 100%;
    max-height: calc(100vh - 46px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: $color_submenu_bg;
  }
  .navigation__wrapper.active{
    display: block;
  }
  .main-menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: left;
    a {
      color: $color_submenu_link;

      &.megamenu__image-title-link {
        color: #fff;
      }
      &.megamenu__image-btn {
        color: #fff;
      }
    }
    .main-menu--active a,
    a:hover{
      color: $color_submenu_link_hover;
          
      &.megamenu__image-title-link,
      &.megamenu__image-btn {
        color: #050A0A;
      }
    }
  }
  .main-menu li,
  .nav__account{
    position: relative;
    font-size: 17px * $font-adjust-body;
    font-weight: $font-weight-body;
  }
  .nav__account a,
  .nav-link{
    padding: 15px 30px 15px 15px;
    display: inline-block;
  }
  .main-menu-dropdown .nav-link{
    padding: 11px 30px 11px 15px;
    font-size: 14px * $font-adjust-body;
  }
  .nav-carat-small{
    display: none;
  }
  .nav-carat{
    position: absolute;
    right:0;
    top: 3px;
    padding: 20px 15px 10px 15px;
    transform: rotateZ(90deg);
    transition: transform 0.15s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;

    svg{
      width: 15px;
      height: 15px;
      color: $color_submenu_link;
      fill: $color_submenu_link;
    }
    &:hover svg{
      color: $color_submenu_link_hover;
      fill: $color_submenu_link_hover;
    }
    &[aria-expanded="true"]{
      transform: rotateZ(270deg);
      svg{
        color: $color_submenu_link;
        fill: $color_submenu_link;
      }
    }
  }
  .main-menu-dropdown{
    display: none;

    &.expanded{
      display: block;
    }
  }
  .main-menu > li > .main-menu-dropdown {
    border-top: 1px solid $color_menu_border;
    border-bottom: 1px solid $color_menu_border;
    .nav-carat{
      top: 0
    }
  }
  .main-menu-dropdown .main-menu-dropdown{
    margin-left: 15px;
    border-left: 2px solid #f3f3f3;
  }
}

?

[namphan]

Hi @ShtokyD ,

Please send the website link, I will check it for you

[DaisyVo]

Hi @ShtokyD ,

Can you share your store URL so that I can help you check further?

Look forward to your response.

Best,

Daisy

[ShtokyD]

https://shtokcustomworx.com/ Store login password: freeix

[namphan]

Hi @ShtokyD ,

Please change code:

- {{ link.title | escape }}
      {% if parent or grandparent or has_megamenu %}{% render 'icon-arrow-right' %}{% endif %}
  
    {% if parent or grandparent or has_megamenu %}
    
        +
        {% render 'icon-arrow-right' %}
    

    

      

          {%- if has_megamenu -%}
            {{ megamenu }}
          {%- endif -%}

          {%- if parent or grandparent %}
            {% for link in link.links %}
              {%- assign toplevel = false -%}
              {% render 'nav-item', link: link %}
            {% endfor %}
          {% endif %}
      
    

    {% endif %}

[ShtokyD]

Where should I change it?

[namphan]

Hi @ShtokyD ,

Please change code here:

[ShtokyD]

It worked, thanks! But the little arrows don’t animate when I touch the Titles and drop down submenu shows up, how do I make the arrows animate? They turn 180 degrees when I click on the arrows.

[ShtokyD]

Can you please help me with it as well?

[namphan]

Hi @ShtokyD ,

It will need a lot of changes, can I send you a collaborator invite?

I will check and change it.

[ShtokyD]

Ok, send me the invite.

[namphan]

Hi @ShtokyD ,

Please send me the collaborator code in private message, I will send you the invitation and check it