Menu icon Foundation
Clickable Link with Dropdown

I am using a the topbar menu with one of the links displaying a drop-down menu. At full width the link is clickable as are the child links but once the toggle option becomes available (for small screens ) the parent link is no no longer clickable and a class of no-click is added to it. I imagine there is some way to configure this so that the link can both have a drop-down and be clickable? However I can't seem to find it in the documentation.

Here is my code:

<nav class="top-bar" data-topbar data-options="custom_back_text: false">
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1>
          <a href="index.php">
            <span class="icon-c-logo-outline"></span><span class="brand">Brand</span>
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>
 
     <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li><a href="index.php">Home</a></li>
        <li class="divider"></li>
        <li class="has-dropdown">
            <a href="about.php">About</a>
        	<ul class="dropdown">
        		<li><a href="findus.php">Find Us</a></li>				
				<li><a href="faq.php">FAQ</a></li>
			</ul>
        </li>
        <li class="divider"></li>
        <li><a href="rooms.php">Rooms</a></li>
        <li class="divider"></li>
        <li><a href="events.php">Events</a></li>
        <li class="divider"></li>
        <li><a href="contact.php">Contact</a></li>
        <li class="has-form">
			<a href="#" class="button" data-reveal-id="resModal">Reserve Now!</a>			
  		</li>
      </ul>
    </section>
  </nav>
            

         

topbardropdown

I am using a the topbar menu with one of the links displaying a drop-down menu. At full width the link is clickable as are the child links but once the toggle option becomes available (for small screens ) the parent link is no no longer clickable and a class of no-click is added to it. I imagine there is some way to configure this so that the link can both have a drop-down and be clickable? However I can't seem to find it in the documentation.

Here is my code:

<nav class="top-bar" data-topbar data-options="custom_back_text: false">
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1>
          <a href="index.php">
            <span class="icon-c-logo-outline"></span><span class="brand">Brand</span>
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>
 
     <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li><a href="index.php">Home</a></li>
        <li class="divider"></li>
        <li class="has-dropdown">
            <a href="about.php">About</a>
        	<ul class="dropdown">
        		<li><a href="findus.php">Find Us</a></li>				
				<li><a href="faq.php">FAQ</a></li>
			</ul>
        </li>
        <li class="divider"></li>
        <li><a href="rooms.php">Rooms</a></li>
        <li class="divider"></li>
        <li><a href="events.php">Events</a></li>
        <li class="divider"></li>
        <li><a href="contact.php">Contact</a></li>
        <li class="has-form">
			<a href="#" class="button" data-reveal-id="resModal">Reserve Now!</a>			
  		</li>
      </ul>
    </section>
  </nav>
            

         

This post has been closed. No new replies can be added.

Shreekar Chonkar almost 6 years ago

Hey Kirsten,
Considering there is no Hover state in the small devices, the only action is, click/tap. So either one can do is open a link or open a dropdown. Perhaps you might want to add that link in your dropdown. and hide it on the large screens using the "hide-for-large-up" class.

Kirsten Cassidy almost 6 years ago

That makes sense. I was thinking perhaps the link could go to a link and the arrow open the dropdown but that might be complicating things. Thanks for your response Shreekar.