Menu icon Foundation

My Posts

No Content

My Comments

Phil Abi-Najm commented on Dana Svedova's post over 5 years

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.

Phil Abi-Najm commented on Dana Svedova's post over 5 years

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 commented on Stolz's post over 5 years

So the fix provided above works, and was incorporated into the latest build. Please note on line 36 of foundation.topbar.js, it's testing for the existence of either the "fixed" class or if the settings.sticky_class is set in the _settings.scss file, and applied to the associated DIV.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Dana Svedova's post over 5 years

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.

You commented on Dana Svedova's post over 5 years

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.

You commented on Stolz's post over 5 years

So the fix provided above works, and was incorporated into the latest build. Please note on line 36 of foundation.topbar.js, it's testing for the existence of either the "fixed" class or if the settings.sticky_class is set in the _settings.scss file, and applied to the associated DIV.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content