Foundation
-
FollowReplies
-
How to Add Arrow in Mobile Menu
byBridget Thursday, August 14, 2014 at 4:39 PM EST
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.
Bridget
almost 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”>❯<span></a></li> <li class="active"><a href="viewbyrooms.html">PRODUCTS <span class=”arrow”>❯<span></a></li> <li class="active"><a href="dealerlocator.html"> DEALER LOCATOR <span class=”arrow”>❯<span></a></li> <li class="active"><a href="about.html">ABOUT <span class=”arrow”>❯<span></a></li> <li class="active"><a href="contactus.html">CONTACT US <span class=”arrow”>❯<span></a></li> </ul> </section> </nav> </div>
Rexford Nkansah
almost 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”>❯<span>
</div>
</a>
</li>
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!