csszurb-foundationzurb-foundation-5

Button style in top bar in Foundation?


Is it possible in Zurb Foundation to have a normal button in the top bar menu items? Here is an example:

enter image description here

The black button is what I'm trying to accomplish.

Here is what the HTML currently looks like:

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

  <section class="top-bar-section">
    <ul class="left">
      <li>
        <a href="#">Nav item</a>
      </li>
      <li>
        <a href="#">Nav item</a>
      </li>
      <li>
        <a href="#">Nav item (Should be button)</a>
      </li>
    </ul>
  </section></nav>
</div>

Solution

  • Sure, just use class button inside a has-form list item.

       <li class="has-form">
            <a class="button">Button</a>
       </li>
    

    Demo: http://codeply.com/go/00cVHQ15Px