How to solve? Tabs disappear when using tab key on BOTH desktop and mobile

Solved
Highlighted
Pathfinder
83 3 10

@Winbox wrote:

The tabs that disappear are actually going through the mobile navigation. You will need tabindex="-1" on the A elements if you want to skip them. If you need tab indexing for the mobile navigation, consider using JavaScript to adjust the tabindex attributes when it goes into mobile view (perhaps based on window size) or use only one set of top navigation links that changes to mobile view via CSS media queries.

Hope that helps!

@Winbox @oscprofessional @KetanKumar I have a file called navigation.liquid. Here's what's in my file:

 

{%- comment -%}
  @param navigation_menu {drop}
    Drop of menu to use for the navigation
{%- endcomment -%}

<nav class="navigation">
  <ul class="header-navigation-list clearfix">
    {% for link in linklists[navigation_menu].links %}
      {% assign has-dropdown = false %}
      {% if linklists[link.handle] and linklists[link.handle].links.size > 0 %}
        {% assign has-dropdown = true %}
      {% endif %}
      <li class="header-navigation-list-item{% if has-dropdown %} has-dropdown{% endif %}" tabindex="-1">
        <a
          class="header-navigation-link primary-link {% if link.active %}header-navigation-current{% endif %}"
          href="{{ link.url }}"
          tabindex="0"
          {% if has-dropdown %}data-has-dropdown{% endif %}
        >
          {{ link.title }}
        </a>
        {% if has-dropdown %}
          {% if showArrows %}
            <a class="icon icon-angle-down header-navigation-list-arrow" tabindex="0" data-has-dropdown></a>
          {% endif %}
          <ul class="header-navigation-list secondary-list clearfix" data-is-dropdown>
            {% for link in linklists[link.handle].links %}
              {% assign has-dropdown = false %}
              {% if linklists[link.handle] and linklists[link.handle].links.size > 0 %}
                {% assign has-dropdown = true %}
              {% endif %}
              <li class="header-navigation-list-item secondary-list-item">
                <a class="header-navigation-link secondary-link" href="{{ link.url }}" tabindex="0">
                  {{ link.title }}
                </a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>

 

I'm wondering if someone can help me implement what @Winbox wrote. Either adding JavaScript or creating one navigation is fine as long as it displays the same. Thanks!

0 Likes
Highlighted