Implementing a sticky navbar using foundation

Question

I am trying to leverage sticky properties to create a menu that stays fixed while scrolling. Am I missing a property? I have foundation properly configured and set up.

HTML:

  <div class="fixed contain-to-grid">
  <nav class="top-bar" data-topbar="">
    <div class="top-bar-title">
    <strong>Title Here</strong>
    </div>
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li class="menu-text"><a href="#">A</a></li>
        <li class="menu-text"><a href="#">B</a></li>
        <li class="menu-text"><a href="#">C</a></li>
        <li class="menu-text"><a href="#">D</a></li>
      </ul>
    </div>
  </nav>
  </div>

CSS:

.top-bar{
    height: 100px;
    width: 100%;
    color: white;
    text-decoration: none;
    font-size: 30px;
    font-family: mainFont;
}

Answer 1

If you want to make the menu sticky, and don't move with scroll, then use fixed position.

.top-bar-left{
   position: fixed;
}