user2684452 user2684452 - 3 months ago 9
CSS Question

Selecting a link in the main navigation when sub-menu appears on mobile

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 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 href="/pages/about-us" class="site-nav__link ">ABOUT</a>
</li>

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

<li>
<a href="/pages/policies" class="site-nav__link ">POLICIES</a>
</li>

<li>
<a href="/pages/posture-center" class="site-nav__link "> CENTER</a>
</li>

<li>
<a href="/pages/back" class="site-nav__link "> BACK</a>
</li>

<li>
<a href="/pages/faq" class="site-nav__link ">FAQ</a>
</li>

<li>
<a href="/pages/our-teachers" class="site-nav__link ">OUR TEACHERS</a>
</li>

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




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.

Comments