Menu icon Foundation
Sticky Nav top-Bar moves to top on small screen

I am building a site that has a row for a logo at the very top of the page. Below that I have a top-bar nav that is wrapped by "sticky contain-to-grid" div. I am using data-options="scrolltop:false" on the nav. On small screens when I am at the very top of the page (not scrolled enough to have the nav stickied) when I expand the nav the entire nav moves to the top of the page - above the div containing the logo.

It appears that since the nav is wrapped by the sticky div it applies the "fixed" class to the sticky div when I expand the menu, which moves the nav to the very top of the page. I would like the nav to stay in place when it is expanded before it has been stickied by scrolling down past the logo area. Is this possible or does a sticky top bar need to be the first element on the page?

The first picture show the nav below the logo area.
The second picture show the expanded nav that has moved to the top of the page.

I included the code for the top of the page. Any help would be greatly appreciated!

Foundation1

Foundation2

<div id="logo_wrap">
    <div class="row">
		<div class="large-8 small-11 columns small-centered">
			<div id="logo">
				<a href="/"><img src="/content/images/logo_here.png" /></a>
			</div><!-- #logo -->
		</div>
	</div>
</div><!-- #logo_wrap -->

  <div class="sticky contain-to-grid top-nav-wrap">
  <!-- Header and Nav -->
  <nav class="top-bar" data-topbar data-options="scrolltop:false">
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1 style="width: 0px; overflow: hidden;">
          <a href="#" style="width: 0px;">
			  &nbsp;
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon">
      	<a href="#">
      		<span>Menu</span>
      	</a>
      </li>
    </ul>

    <section class="top-bar-section">
      <!-- Left Nav Section -->
      <ul class="">
        <!-- <li class="divider"></li> -->
        <li>
          <a class="active" href="#">Main Item 1</a>
        </li>
        <li>
          <a class="active" href="#">Main Item 2</a>
        </li>
        <li>
          <a class="active" href="#">Main Item 3</a>
        </li>
      </ul>
    </section>
  </nav>
  <!-- End Header and Nav -->
  </div>

navtop-barstickymobile

I am building a site that has a row for a logo at the very top of the page. Below that I have a top-bar nav that is wrapped by "sticky contain-to-grid" div. I am using data-options="scrolltop:false" on the nav. On small screens when I am at the very top of the page (not scrolled enough to have the nav stickied) when I expand the nav the entire nav moves to the top of the page - above the div containing the logo.

It appears that since the nav is wrapped by the sticky div it applies the "fixed" class to the sticky div when I expand the menu, which moves the nav to the very top of the page. I would like the nav to stay in place when it is expanded before it has been stickied by scrolling down past the logo area. Is this possible or does a sticky top bar need to be the first element on the page?

The first picture show the nav below the logo area.
The second picture show the expanded nav that has moved to the top of the page.

I included the code for the top of the page. Any help would be greatly appreciated!

Foundation1

Foundation2

<div id="logo_wrap">
    <div class="row">
		<div class="large-8 small-11 columns small-centered">
			<div id="logo">
				<a href="/"><img src="/content/images/logo_here.png" /></a>
			</div><!-- #logo -->
		</div>
	</div>
</div><!-- #logo_wrap -->

  <div class="sticky contain-to-grid top-nav-wrap">
  <!-- Header and Nav -->
  <nav class="top-bar" data-topbar data-options="scrolltop:false">
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1 style="width: 0px; overflow: hidden;">
          <a href="#" style="width: 0px;">
			  &nbsp;
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon">
      	<a href="#">
      		<span>Menu</span>
      	</a>
      </li>
    </ul>

    <section class="top-bar-section">
      <!-- Left Nav Section -->
      <ul class="">
        <!-- <li class="divider"></li> -->
        <li>
          <a class="active" href="#">Main Item 1</a>
        </li>
        <li>
          <a class="active" href="#">Main Item 2</a>
        </li>
        <li>
          <a class="active" href="#">Main Item 3</a>
        </li>
      </ul>
    </section>
  </nav>
  <!-- End Header and Nav -->
  </div>
David Faber about 5 years ago

I had exactly the same problem and found no way to fix it the "foundation" way. Therefore I developed a workaround using waypoints.js ( http://imakewebthings.com/jquery-waypoints ).

My JS:

 /**
 * Sticky Top-Bar Mobile Fix
 */
$('.top-nav-wrap').waypoint(function (direction) { //I gave the 
    if (direction == 'down') {
        $(this).addClass('super-fixed');
    }
});

$('header.header').waypoint(function (direction) {
    if (direction == 'up') {
        $('[data-fixed="top"]').removeClass('super-fixed');
    }
}, {
    offset: -162 // header.height - menu.height in my case 200px - 38px
});

My SASS:

.super-fixed {
  @extend .fixed;
}