Menu icon Foundation
How to make double lined top bar?

What I am trying to make:

1

Code used:

 
      <div class="contain-to-grid">
      <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">LOGO</a></h1>
    </li>
   
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="right">
        
        <li><a href="#">RETURN<br/>home</a></li>
            <li><a href="#">TASTE<br/>new menu</a></li>
            <li><a href="#">ATTEND<br/>events</a></li>
            <li><a href="#">EXPLORE<br/>our culture</a></li>
            <li><a href="#">BOOK<br/>your place</a></li>
        
        </ul>
      </li>
    </ul>

  </section>
</nav>
      </div>
            

         

What I actually see:

2

How do I make what I want to make?
And how to set custom height of the whole panel?

Thanks!

topbarnavigationdoublelinedFoundationzurb

What I am trying to make:

1

Code used:

 
      <div class="contain-to-grid">
      <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">LOGO</a></h1>
    </li>
   
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="right">
        
        <li><a href="#">RETURN<br/>home</a></li>
            <li><a href="#">TASTE<br/>new menu</a></li>
            <li><a href="#">ATTEND<br/>events</a></li>
            <li><a href="#">EXPLORE<br/>our culture</a></li>
            <li><a href="#">BOOK<br/>your place</a></li>
        
        </ul>
      </li>
    </ul>

  </section>
</nav>
      </div>
            

         

What I actually see:

2

How do I make what I want to make?
And how to set custom height of the whole panel?

Thanks!

Bob Sawyer over 4 years ago

You need to set a CSS line-height on the <a> in the menu.

Darijus Veselis over 4 years ago

I know that I need to set line-height. Could you please tell me which element is that? I was looking for it for couple hours and couldn't find it.

P.S. I'm new to Foundation 5.

Bob Sawyer over 4 years ago

If you have Firefox, install the Firebug extension. It will allow you, among other things, to right-click on any element in a web page and view everything about that element, including the styling currently on it.

I created a pen with your code above:

http://codepen.io/bobsawyer/pen/gpayZp

If I right-click on the <a> in the nav, I can see that it has the following styles already attached:

.top-bar-section li:not(.has-form) a:not(.button) {
    background: none repeat scroll 0 0 #333;
    line-height: 2.8125rem;
    padding: 0 0.9375rem;
}

I changed the styling to:

.top-bar-section li:not(.has-form) a:not(.button) {
    background: none repeat scroll 0 0 #333;
    line-height: 1rem;
    padding: 0.4rem 0.9375rem 0;
}

And achieved the results you are looking for.

You'll want to add the style rule to a separate CSS file. Do not edit the foundation.css file directly.

Darijus Veselis over 4 years ago

Thank you mate!