Menu icon Foundation
Fixed top menu jumps to top on click

On a small screen, when pressing the 'Menu' link on a fixed positioned navigation, the click forces the page back to the top rather than just opening the menu in place, above the content (with z-index). This is distracting to the user if he/she is towards the middle of the page and now has to find his/her way back to where he/she left off.

There is no hash [#] tag following the URL (ie: http://mysite.com/#) or JS errors. So, I'm guessing, Foundation's current implementation is correct.

The other issue I faced—when the menu is not closed, the menu is no longer fixed to the top.

On a small screen, is there a way to make Foundation's fixed top menu react more like Twitter Bootstrap's menu?
http://www.responsinator.com/?url=getbootstrap.com

I've posted my code to make sure I've called the menu correctly.

<div class="fixed">
    
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#">Clickable Top Bar</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">

    <!-- Right Nav Section -->
    <ul class="right">
      <li class="divider hide-for-small"></li>
      <li class="has-dropdown"><a href="#">Main Item 1</a>
        <ul class="dropdown">
          <li><label>Dropdown Level 1 Label</label></li>
          <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>

            <ul class="dropdown">
              <li><a href="#">Dropdown Level 2a</a></li>
              <li><a href="#">Dropdown Level 2b</a></li>
              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                <ul class="dropdown">
                  <li><a href="#">Dropdown Level 3a</a></li>
                  <li><a href="#">Dropdown Level 3b</a></li>
                  <li><a href="#">Dropdown Level 3c</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 2d</a></li>
              <li><a href="#">Dropdown Level 2e</a></li>
              <li><a href="#">Dropdown Level 2f</a></li>
            </ul>
          </li>
          <li><a href="#">Dropdown Level 1b</a></li>
          <li><a href="#">Dropdown Level 1c</a></li>
          <li class="divider"></li>
          <li><label>Dropdown Level 1 Label</label></li>
          <li><a href="#">Dropdown Level 1d</a></li>
          <li><a href="#">Dropdown Level 1e</a></li>
          <li><a href="#">Dropdown Level 1f</a></li>
          <li class="divider"></li>
          <li><a href="#">See all &rarr;</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

</div>
            

         

menunavigationtop-barfixed

On a small screen, when pressing the 'Menu' link on a fixed positioned navigation, the click forces the page back to the top rather than just opening the menu in place, above the content (with z-index). This is distracting to the user if he/she is towards the middle of the page and now has to find his/her way back to where he/she left off.

There is no hash [#] tag following the URL (ie: http://mysite.com/#) or JS errors. So, I'm guessing, Foundation's current implementation is correct.

The other issue I faced—when the menu is not closed, the menu is no longer fixed to the top.

On a small screen, is there a way to make Foundation's fixed top menu react more like Twitter Bootstrap's menu?
http://www.responsinator.com/?url=getbootstrap.com

I've posted my code to make sure I've called the menu correctly.

<div class="fixed">
    
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#">Clickable Top Bar</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">

    <!-- Right Nav Section -->
    <ul class="right">
      <li class="divider hide-for-small"></li>
      <li class="has-dropdown"><a href="#">Main Item 1</a>
        <ul class="dropdown">
          <li><label>Dropdown Level 1 Label</label></li>
          <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>

            <ul class="dropdown">
              <li><a href="#">Dropdown Level 2a</a></li>
              <li><a href="#">Dropdown Level 2b</a></li>
              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                <ul class="dropdown">
                  <li><a href="#">Dropdown Level 3a</a></li>
                  <li><a href="#">Dropdown Level 3b</a></li>
                  <li><a href="#">Dropdown Level 3c</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 2d</a></li>
              <li><a href="#">Dropdown Level 2e</a></li>
              <li><a href="#">Dropdown Level 2f</a></li>
            </ul>
          </li>
          <li><a href="#">Dropdown Level 1b</a></li>
          <li><a href="#">Dropdown Level 1c</a></li>
          <li class="divider"></li>
          <li><label>Dropdown Level 1 Label</label></li>
          <li><a href="#">Dropdown Level 1d</a></li>
          <li><a href="#">Dropdown Level 1e</a></li>
          <li><a href="#">Dropdown Level 1f</a></li>
          <li class="divider"></li>
          <li><a href="#">See all &rarr;</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

</div>
            

         
Rafi Benkual over 5 years ago

I think this related to http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar

We are working a fixed topbar for off-canvas

Chris G over 5 years ago

Regarding the “jumps to top on click” issue, see the default data-options outlined at the bottom of the Top Bar Docs page.

http://foundation.zurb.com/docs/components/topbar.html

Note the default behavior is to jump to top—scrolltop: true. Which, I agree, is distracting. The good news is you can override that by adding data-options="scrolltop:false" to your .top-bar element like below.

<nav class="top-bar" data-topbar data-options="scrolltop:false">

Brian Ackerman almost 5 years ago

The only thing that makes the top bar sticky is the addition/removal of the fixed class when the browser hits the appropriate scroll height.

Line 118 of foundation.topbar.js erroneously removes the fixed class.

topbar.parent().removeClass('fixed'); 

I've modified lines 117 - 124 so that the fixed class is only removed if scrolltop is true.

topbar.addClass('fixed');
$('body').css('padding-top','0');

if (self.settings.scrolltop) {
     topbar.parent().removeClass('fixed');
    window.scrollTo(0,0);
}