Menu icon Foundation
Three lines menu icon

Hello,

I am trying to figure out how can I make my menu turns into the little hamburger menu when making the window smaller. Just like on this site: http://www.raymasaki.com/

Any help will be greatly appreciated!

menu

Hello,

I am trying to figure out how can I make my menu turns into the little hamburger menu when making the window smaller. Just like on this site: http://www.raymasaki.com/

Any help will be greatly appreciated!

Wing-Hou Chan over 5 years ago

Hi Adda!

Take a look at Foundation's topbar navigation: http://foundation.zurb.com/docs/components/topbar.html

Rafi Benkual over 5 years ago

Can you elaborate on the question? The mobile menu icon is built into our topbar.

Rion Massie over 5 years ago

Yeah, I'm using F5 and not able to get the hot dog menu to show up.

My code is below. Maybe I am overlooking something.

<nav class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <a href="/"><img src="/img/Outrageous_Audio_large.png" width="50%" height="50%"></a>
                    </li>
                    <li class="toggle-topbar menu-icon"><a href="">Menu</a></li>
                </ul>
                <section class="top-bar-section">
                    <ul class="right">
                        <li><a href="products.php">What We Do</a></li>
                        <li><a href="education.php">Learn The Truth</a></li>
                        <li><a href="our_people.php">Our People</a></li>
                        <li><a href="our_story.php">Our Story</a></li>
                        <li><a href="contact_us.php">Contact Us</a></li>
                        <li><a href="guarantee.php">Our Guarantee</a></li>

                    </ul>
                </section>
            </nav>

Rion Massie over 5 years ago

I found the solution.

There needs to be a "span" element in the anchor.

roxanne sutton about 5 years ago

I am looking at the sample code for F5 and i don't see a span element in the code. and it does not seem it should be necessary from the SASS either.

I am having the same problem, using SASS 3.3.0 and F5

roxanne sutton about 5 years ago

what i am noticing is that i never pick up the .top-bar .toggle-topbar.menu-icon rule, although it IS in the compiled css. same for the anchor rule. so i am left with just the text.

leo_haldan over 4 years ago

I am having the same problem and am using css, any solutions?