Menu icon Foundation
How to Add Arrow in Mobile Menu

Arrows mobilemenu

Attached is an example of the mobile menu with arrows on right and visible. Currently, my website on mobile menu is missing arrows. (on Desktop version, we don't use arrows on top navigation bar) I would like to know how to add arrows in there, where in the CSS file to add codes?

Thank you in advance.

Arrows mobilemenu

Attached is an example of the mobile menu with arrows on right and visible. Currently, my website on mobile menu is missing arrows. (on Desktop version, we don't use arrows on top navigation bar) I would like to know how to add arrows in there, where in the CSS file to add codes?

Thank you in advance.

Nic Edwards about 5 years ago

You can us a text icon like one form here: http://character-code.com/arrows-html-codes.php

http://codepen.io/nemesisjoe/pen/bdmJz

The class of "arrow" in the code shows you how to do that using CSS, check it out!

Bridget about 5 years ago

Added the code for arrows and it works but there's a problem. I don't want the arrows visible on desktop but visible only on small screens like iPhone. How do I go about making arrows hide in desktop but visible on small screens?

Attached is the HTML code for top nav bar and arrows.

    <li class="toggle-topbar menu-icon"><a href="index.html"><span></span></a></li>
  </ul>

  <section class="top-bar-section">      

    <ul class="right">
      <li class="active"><a href="viewbyrooms.html">VIEW BY ROOMS  <span class=arrow>&#10095;<span></a></li>

      <li class="active"><a href="viewbyrooms.html">PRODUCTS  <span class=arrow>&#10095;<span></a></li>

      <li class="active"><a href="dealerlocator.html"> DEALER LOCATOR <span class=arrow>&#10095;<span></a></li>

      <li class="active"><a href="about.html">ABOUT <span class=arrow>&#10095;<span></a></li>

      <li class="active"><a href="contactus.html">CONTACT US <span class=arrow>&#10095;<span></a></li>
    </ul>
  </section>
</nav>
</div>

Rexford Nkansah about 5 years ago

Not tested, but have you tried using the "hide-for-large" class?

So perhaps:
HTML
<li class="active">
<a href="viewbyrooms.html">
VIEW BY ROOMS
<div class="hide-for-large-up">
<span class=”arrow”>&#10095;<span>
</div>
</a>
</li>

http://foundation.zurb.com/docs/components/visibility.html