Menu icon Foundation
Simple Text Navigation

How is possible to make simple top menu in foundation 5? Is needed to use topbar or is there any other possibility? My actual code is:

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
         <h1><a href="#">Site Name</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
    </ul>
    <section class="top-bar-section">
        <ul class="right">
            <li class="active"><a href="#">Domov</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </section>
</nav>

I need to have design like this:

Menu

In my actual code is also problem with resizing. When I resize it to mobile width menu broke up and jump under logo instead of collapsing in simple icon.

topmenunavigationtopbarmenutop-barsimplemenuinline-lists-mobileinline lists mobile

How is possible to make simple top menu in foundation 5? Is needed to use topbar or is there any other possibility? My actual code is:

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
         <h1><a href="#">Site Name</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
    </ul>
    <section class="top-bar-section">
        <ul class="right">
            <li class="active"><a href="#">Domov</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </section>
</nav>

I need to have design like this:

Menu

In my actual code is also problem with resizing. When I resize it to mobile width menu broke up and jump under logo instead of collapsing in simple icon.

Michal Slabej almost 5 years ago

You can see current version here: sauny.osuchane.sk login: dev password: developer . Try to resize monitor and you will see main problem.