Menu icon Foundation
How to create a fixed menu

Hey guys.
I'm trying to create a top menu like this - http://www.knucklesindustries.com/.
The menu stays in place when you use the scroll to see the rest of the content.

top menufix menu

Hey guys.
I'm trying to create a top menu like this - http://www.knucklesindustries.com/.
The menu stays in place when you use the scroll to see the rest of the content.

Zack Warren over 5 years ago

In foundation 5, you would do that with this. Notice the div that's wrapping the entire nav element.

<div class="sticky">  
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">My Site</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="active"><a href="#">Right Button Active</a></li>
        <li class="has-dropdown">
          <a href="#">Right Button Dropdown</a>
          <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
          </ul>
        </li>
      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#">Left Nav Button</a></li>
      </ul>
    </section>
  </nav>
</div>


sanlorena about 4 years ago

I want my top menu to display in the same way. I used this code and added in the CSS:
.sticky {position: fixed} to make it stay in the same position, but this made the menu go off the grid... what am I missing?