Ad

Selecting A Link In The Main Navigation When Sub-menu Appears On Mobile

- 1 answer

I have a drop-down menu in a Shopify site I'm creating.

On desktop, the main li is clickable to a link, as well as opening the sub-menu items when hovered.

On mobile, the main li ONLY opens the sub-menu "drawer", but can't be selected as a link on its own.

How can I make it selectable and open the drawer on mobile?

li a {
  display: block;
  padding: 7px 10px !important;
  text-align: left !important;
}
<li class="site-nav--has-dropdown site-nav--active" aria-haspopup="true">
  <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/" class="site-nav__link">
                           Home
              <span class="icon icon-arrow-down" aria-hidden="true"></span>
             </a>
  <ul class="site-nav__dropdown">
    <div>
      <li>
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/pages/about-us" class="site-nav__link ">ABOUT</a>
      </li>

      <li>
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/pages/plans-and-pricing" class="site-nav__link ">PLANS &amp; PRICING</a>
      </li>

      <li>
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/pages/policies" class="site-nav__link ">POLICIES</a>
      </li>

      <li>
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/pages/posture-center" class="site-nav__link "> CENTER</a>
      </li>

      <li>
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/pages/back" class="site-nav__link "> BACK</a>
      </li>

      <li>
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/pages/faq" class="site-nav__link ">FAQ</a>
      </li>

      <li>
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/pages/our-teachers" class="site-nav__link ">OUR TEACHERS</a>
      </li>

    </div>
    <span class="arrow">&nbsp;</span>
  </ul>
</li>

Ad

Answer

Include the main li link as the first item in the sub-menu (in addition to the link in the main menu).

Display it on mobile devices.

Hide it with display: none on desktop devices.

Ad
source: stackoverflow.com
Ad