Menu icon Foundation
How to do multiline Top Bar?

I would like to hack the Foundation 5 Top-Bar to match the following design:

Top bar task

Currently I do have the following code:

The issue is that I cannot bring the multiline functionality to work and the actual Top Bar menu items to align (either full height or stick to top of Top Bar.

I'm using Foundation 5.5.2 with an minified full-featured CSS.

How to apply this design to Foundation's Top Bar?

top-barFoundation-5

I would like to hack the Foundation 5 Top-Bar to match the following design:

Top bar task

Currently I do have the following code:

The issue is that I cannot bring the multiline functionality to work and the actual Top Bar menu items to align (either full height or stick to top of Top Bar.

I'm using Foundation 5.5.2 with an minified full-featured CSS.

How to apply this design to Foundation's Top Bar?

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

burnersk about 4 years ago

(my code blog wasn't published so here is the code)
HTML
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>
<span class="name1">Site</span>
<span class="name2">Title</span>
</h1>
<span class="slogan show-for-medium-up">Site Slogan</span>
</li>
<li class="toggle-topbar menu-icon"><a><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active"><a>Active</a></li>
<li><a>Top Bar 2</a></li>
<li><a>Hover</a></li>
<li><a>Top Bar 4</a></li>
</ul>
</section>
</nav>

Forum's JavaScript seems seriously broken. I cannot edit/publish posts including Code sections and this "HTML highlighter" - well it smashes everything.

Rafi Benkual about 4 years ago

We have a building block that will help you get started on this: http://zurb.com/building-blocks/two-level-top-bar-with-social-icons-and-logo