Menu icon Foundation
Sticky tob-bar on small screens only

I am trying to make a sticky top-bar that is only sticky on small screen sizes using data-option="sticky_on:small" but it is still sticky on the large and medium sizes. What am I doing wrong?

<div class="contain-to-grid sticky column" data-options="sticky_on:small" >
          <nav class="top-bar"  data-topbar>
              <ul class="title-area show-for-small-only">
                  <li class="name">
                    <h1><a href="#">Nobody Knows</a></h1>
                  </li>
                  <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              </ul>
              <section class="top-bar-section">
                  <ul class="left">
                      <li><a href="#">Nobody Universe</a></li>
                      <li class="has-dropdown"> <a href="#">Nobody Books</a>
                          <ul class="dropdown">
                              <li><a href="#">Nobody Knows Anything!</a></li>
                              <li><a href="#">Nobody Knows Evolution!</a></li>
                              <li><a href="#">Nobody Knows Consciousnes!</a></li>
                          </ul>
                      </li>
                      <li><a href="#">Nobody Reviews</a></li>
                      <li><a href="#">Who is Nobody</a></li>
                  </ul>
              </section>
          </nav>
        </div>
            

         

stickytopbar

I am trying to make a sticky top-bar that is only sticky on small screen sizes using data-option="sticky_on:small" but it is still sticky on the large and medium sizes. What am I doing wrong?

<div class="contain-to-grid sticky column" data-options="sticky_on:small" >
          <nav class="top-bar"  data-topbar>
              <ul class="title-area show-for-small-only">
                  <li class="name">
                    <h1><a href="#">Nobody Knows</a></h1>
                  </li>
                  <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              </ul>
              <section class="top-bar-section">
                  <ul class="left">
                      <li><a href="#">Nobody Universe</a></li>
                      <li class="has-dropdown"> <a href="#">Nobody Books</a>
                          <ul class="dropdown">
                              <li><a href="#">Nobody Knows Anything!</a></li>
                              <li><a href="#">Nobody Knows Evolution!</a></li>
                              <li><a href="#">Nobody Knows Consciousnes!</a></li>
                          </ul>
                      </li>
                      <li><a href="#">Nobody Reviews</a></li>
                      <li><a href="#">Who is Nobody</a></li>
                  </ul>
              </section>
          </nav>
        </div>
            

         

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

Chelsea K Potts over 5 years ago

Nevermind. Apparently all I had to do was move the data-options to the nav tag and refresh the page at the different screen sizes