Menu icon Foundation
Foundation 6 Sticky Topbar not behaving properly at small browser resize

Hi, I'm working with foundation 6. I have a sticky topbar on my website. It works fine on Large and Medium but when it gets down to small it developes a 54px height. I set class sticky-container to height: 0; and it works if i refresh the browser. When I navigate away and back again the 54px gap shows up again. I added the hide for small class and it fixed the problem but now the hamburger menu does not work. I've been working with someone on stack overflow: http://stackoverflow.com/questions/34750414/foundation-6-sticky-topbar-not-behaving-properly-at-small-browser-resize ...Nothing works. Any Ideas? my website is http://adolfobarreto.atwebpages.com Thanks-Adolfo

<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
    <a class="logo-small show-for-small-only" href="#"><img src="/assets/img/fingerLogoXS.gif" /></a>
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<div class="hide-for-small-only" data-sticky-container>
    <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
        <nav class="top-bar" id="nav-menu">
            <div class="logo-wrapper hide-for-small-only">
                <div class="logo">
                    <img src="/assets/img/fingerLogoSM.2.gif">
                </div>
            </div>
            <!-- Left Nav Section -->
            <div class="top-bar-left">
                <ul class="vertical medium-horizontal menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                </ul>
            </div>
            <!-- Right Nav Section -->
            <div class="top-bar-right">
                <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
                    <li class="has-submenu">
                        <a href="#">Technologies Used...</a>
                        <ul class="submenu menu vertical medium-verticle" data-submenu>
                            <li><a href="foundation.html">Foundation</a></li>
                            <li><a href="html5.html">HTML5</a></li>
                            <li><a href="css3.html">CSS3</a></li>
                            <li><a href="javascript.html">JavaScript</a></li>
                            <li><a href="wordpress.html">WordPress</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>
            

         

foundation 6

Hi, I'm working with foundation 6. I have a sticky topbar on my website. It works fine on Large and Medium but when it gets down to small it developes a 54px height. I set class sticky-container to height: 0; and it works if i refresh the browser. When I navigate away and back again the 54px gap shows up again. I added the hide for small class and it fixed the problem but now the hamburger menu does not work. I've been working with someone on stack overflow: http://stackoverflow.com/questions/34750414/foundation-6-sticky-topbar-not-behaving-properly-at-small-browser-resize ...Nothing works. Any Ideas? my website is http://adolfobarreto.atwebpages.com Thanks-Adolfo

<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
    <a class="logo-small show-for-small-only" href="#"><img src="/assets/img/fingerLogoXS.gif" /></a>
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<div class="hide-for-small-only" data-sticky-container>
    <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
        <nav class="top-bar" id="nav-menu">
            <div class="logo-wrapper hide-for-small-only">
                <div class="logo">
                    <img src="/assets/img/fingerLogoSM.2.gif">
                </div>
            </div>
            <!-- Left Nav Section -->
            <div class="top-bar-left">
                <ul class="vertical medium-horizontal menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                </ul>
            </div>
            <!-- Right Nav Section -->
            <div class="top-bar-right">
                <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
                    <li class="has-submenu">
                        <a href="#">Technologies Used...</a>
                        <ul class="submenu menu vertical medium-verticle" data-submenu>
                            <li><a href="foundation.html">Foundation</a></li>
                            <li><a href="html5.html">HTML5</a></li>
                            <li><a href="css3.html">CSS3</a></li>
                            <li><a href="javascript.html">JavaScript</a></li>
                            <li><a href="wordpress.html">WordPress</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>
            

         
Val Ery over 1 year ago

Responsive Topbar + Sticky + Hamburger Icon:

<div class="title-bar" data-responsive-toggle="responsive-topbar" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div data-sticky-container>
  <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
    <div class="top-bar" id="responsive-topbar">
      <div class="top-bar-left">
        <ul class="menu">
          <li class="menu-text">Site Title</li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="has-submenu">
            <a href="#">One</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

For small devices - not sticky

Rafi Benkual over 1 year ago

@Val Ery Very good example! I added it to a codepen demo so people can see http://codepen.io/rafibomb/pen/eJEVgR

Rafi Benkual over 1 year ago

Cool portfolio site! Looks like you're using 100vh on the hero image, right?

Val Ery over 1 year ago

@Rafi Benkual ! It's cool, and right! Thanks!

Adolfo Barreto over 1 year ago

Thank you Val and Rafi for the help and support!

Steven Muncy over 1 year ago

How would you make it sticky on all size screens?
Also, for small screens, how would you keep the site title on the left and have the menu button on the right?

Val Ery over 1 year ago

@Steven Muncy
I wouldn't use for this purpose Topbar. In General, what came up with:

Quote: "How would you make it sticky on all size screens?"
Add atribute data-options="stickyOn: small" (link to doc - http://foundation.zurb.com/sites/docs/sticky.html#js-options)

Quote: "for small screens, how would you keep the site title on the left and have the menu button on the right?"
Use Visibility Classes (docs - http://foundation.zurb.com/sites/docs/visibility.html)

Result - like this:

<div data-sticky-container>
  <div class="small-12 sticky" data-sticky data-options="stickyOn: small">

    <div class="title-bar" data-responsive-toggle="responsive-topbar" data-hide-for="medium">
      <a href="#" class="menu-text show-for-small-only">Site Title</a>
      <button class="menu-icon float-right" type="button" data-toggle></button>
    </div>

    <div class="top-bar" id="responsive-topbar">
      <div class="top-bar-left">
        <ul class="menu">
          <li class="menu-text hide-for-small-only">Site Title</li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="has-submenu">
            <a href="#">One</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Margin on top, its fulfills the rule for sticky elements: marginTop = "1em"

Will it work - I don't know :) Try it!

Steven Muncy over 1 year ago

Thanks, that gets me closer.

Val Ery over 1 year ago

@Steven Muncy ,
Remove marginTop can be as follows: add element data-margin-top="0" to data-sticky div
Ex.:

<div data-sticky-container>
  <div class="small-12 sticky" data-sticky data-sticky-on="small" data-margin-top="0">
    <div class="title-bar"><!-- Menu Icon --></div>
    <div class="top-bar"><!-- Top Bar --></div>
  </div>
</div>

bill 11 months ago

How would one make it sticky on small screens ONLY? 

data-sticky-on="small"

seems to make it sticky on all screen size, and therefore be the same as having no option. 

Anyone have any ideas?