Menu icon Foundation
F3 sticky top-bar

Hello,
I'm using the sticky top-bar with Foundation 3 and I've found a cosmetic bug. It works fine when I scroll down, but once I scroll back up to the top, the top-bar doesn't "snap" in place. The content that was originally below the top-bar is now pushed up and when I scroll up, the bar covers the space, so it's unreadable.

Here is my HTML:

<div class="row collapse">
  <div class="twelve columns">
    <div class="contain-to-grid sticky"> 
      <nav class="top-bar" role="navigation">
        <ul>
          <li class="name"><h1><a href="" title="" rel="home"><img src="" alt="" />Logo</a></h1></li>
          <li class="toggle-topbar"><a href="#"></a></li>
        </ul>
        <section>         
          <ul class="right">
            <li><a href="">Page 1</a></li>
            <li><a href="">Page 2</a></li>
            <li><a href="">Page 3</a></li>
            <li><a href="">Page 4</a></li>
            <li><a href="">Page 4/a></li>           
          </ul>  
        </section>
      </nav>
    </div>
  </div>
</div>
            

         

And the corresponding CSS:

.top-bar .right {
    padding-top: 10px;
}
.top-bar {
	width: auto;
	background-color: #FFF;
	padding: 15px 0;
	min-height: 71px;
}
.contain-to-grid {
	background-color: #FFF;
	border-bottom: 2px solid #F4F4F4;
}
.contain-to-grid .top-bar {
	max-width: 1024px;
}

I appreciate any help! :)

topbarstickyfixedFoundation 3

Hello,
I'm using the sticky top-bar with Foundation 3 and I've found a cosmetic bug. It works fine when I scroll down, but once I scroll back up to the top, the top-bar doesn't "snap" in place. The content that was originally below the top-bar is now pushed up and when I scroll up, the bar covers the space, so it's unreadable.

Here is my HTML:

<div class="row collapse">
  <div class="twelve columns">
    <div class="contain-to-grid sticky"> 
      <nav class="top-bar" role="navigation">
        <ul>
          <li class="name"><h1><a href="" title="" rel="home"><img src="" alt="" />Logo</a></h1></li>
          <li class="toggle-topbar"><a href="#"></a></li>
        </ul>
        <section>         
          <ul class="right">
            <li><a href="">Page 1</a></li>
            <li><a href="">Page 2</a></li>
            <li><a href="">Page 3</a></li>
            <li><a href="">Page 4</a></li>
            <li><a href="">Page 4/a></li>           
          </ul>  
        </section>
      </nav>
    </div>
  </div>
</div>
            

         

And the corresponding CSS:

.top-bar .right {
    padding-top: 10px;
}
.top-bar {
	width: auto;
	background-color: #FFF;
	padding: 15px 0;
	min-height: 71px;
}
.contain-to-grid {
	background-color: #FFF;
	border-bottom: 2px solid #F4F4F4;
}
.contain-to-grid .top-bar {
	max-width: 1024px;
}

I appreciate any help! :)

Dana Svedova almost 6 years ago

I'm testing it on my local XAMPP (making a template for my website), but I've changed the original Foundation example, you can find it here: http://test.dana-svedova.cz/

And I'm using F3, not F4 as I previously wrote, sorry about the confusion.

Dana Svedova almost 6 years ago

Anyone have any ideas?

Chris Matthias almost 6 years ago

It'd be much more helpful if we had a URL of the issue in action. Here's a reproduction of your code (without the color styling) and it's working fine: http://jsfiddle.net/thetrickster/LE5Ap/

So that means it has to do with the parent elements and their styles if this HTML block is inside other elements or it's a javascript error.

Dana Svedova over 5 years ago

Thanks Phil for your help
I finally figured it out (well, rather hacked it, really). Simply ditched the '.sticky' class and put '.fixed' there right in the beginning. So like this:

<div class="contain-to-grid sticky"> 

to

<div class="contain-to-grid fixed"> 

Dana Svedova over 5 years ago

Hi Chris,
thanks for your reply! However, this is not working as I need it to. When I scroll down and back up, the topbar still covers the content above. When I refresh the page while being scrolled down and then back up, it doesn't cover the text on the top but instead has free space above the top-bar.

I assume the best way would be to do something javascript-y, but I have not much experience with it.

Rafi Benkual almost 3 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63

Phil Abi-Najm over 5 years ago

I'm looking into the same issue now... In the foundation.min.js or the bower components foundation.topbar.js, you'll find that when using sticky nav, an additional class of "f-topbar-fixed" is added which contains padding for the height of the topbar. It may not be removing the class when scrolled to the top of the screen. I'd double check your scroll position to make sure your site is registering 0 for scrollTop when you're scrolled all the way up.

For me, I'm running into an issue where it adds the class, but pushes everything down by 45px, which I then have to scroll past. When I scroll up, the blank 45px is visible until I reach the very top, where it then snaps back into place.

Phil Abi-Najm over 5 years ago

Figured out what was going on with my issue... Apparently, f-topbar-fixed was applying 'margin-top: 2rem' to a div with the 'container' class inside my body.

<body>
  <header class="contain-to-grid sticky">
      <nav class="top-bar" data-topbar>
          ....
      </nav>
  </header>

  // contains all page content, the margin-top was being applied here
  <div class="container">
  </div>
</body>

I simply set .container { margin-top: 0 !important; } in my styles.scss file, and it works fine now.

Chris Matthias over 5 years ago

Sorry for the late reply, Dana. I've experienced this bug before in Foundation 3-- If you move the top-bar to a different place sometimes this crops up-- essentially, what is happening is that the top-bar when it hits that scroll point gets set to be "fixed" and the .fixed class is applied to.top-bar`'s parent element.

This CSS style fixes it to the top of the site, thus, essentially pulling the .top-bar element right out of the layout so you'll lose whatever vertical space that .top-bar element was taking up when it is fixed. I think it's a bug in the script for that version-- I've had success creating a div.top-bar-fill just before my .top-bar element and using SASS/CSS to hide it initally and only activate it when the parent element is set to .fixed. The trick is to figure out how tall you want the filler-- it should match the height of the .top-bar element when it's NOT fixed.

HTML:

<div class="contain-to-grid sticky">
  <div class="sticky-fill"></div>
  <div class="top-bar">
    ...etc...
</div>
.sticky-fill { height: 42px; display: none; }
.fixed .sticky-fill { display: block; }