Menu icon Foundation
Example of sticky menubar for Foundation 6

Would it be possible to add an example to the Foundation 6 docs for drop down menu bars (http://foundation.zurb.com/sites/docs/dropdown-menu.html), showing how to achieve the same sticky effect as in http://foundation.zurb.com/sites/docs/v/5.5.3/components/topbar.html#sticky-top-bar

foundation 6drop downsticky

Would it be possible to add an example to the Foundation 6 docs for drop down menu bars (http://foundation.zurb.com/sites/docs/dropdown-menu.html), showing how to achieve the same sticky effect as in http://foundation.zurb.com/sites/docs/v/5.5.3/components/topbar.html#sticky-top-bar

Magda Jans over 3 years ago

Thanks so far, and happy holidays!

Brian Tan over 3 years ago

I have no problem, on Firefox, Safari, Chrome on iPad, PC, iPhone.

I'm on 6.0.6

Magda Jans over 3 years ago

Sorry to harp on this, but has anybody tested the sticky topbar with images on their page? I still have problems with Safari, Opera and Firefox: I scroll down, but as soon as images start to appear the topbar vanishes (it does not happen each time I refresh the page; sometimes it woks as it should, sometimes not). This does not happen when there is only text on the page. I'm confused...

<!doctype html>
<html class="no-js" lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test for Navigation</title>
  <link rel="stylesheet" href="assets/css/foundation.css" />
  <link rel="stylesheet" href="assets/css/app.css" />
  </head>
  <body>
    <div id="sticker" />
    <nav data-sticky-container>
      <div style="width:100%" class="sticky" data-sticky data-options="marginTop:0;anchor:sticker;">
        <div class="top-bar">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li class="menu-text">My Site</li>
              <li><a  href="about">About</a></li>
              <li class="has-submenu"><a href="projects">Projects</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="projects/project-a">Project A</a></li>
                  <li><a href="projects/project-b">Project B</a></li>
                  <li><a href="projects/project-c">Project C</a></li>
                  <li><a href="projects/project-d">Project D</a></li>
                </ul>
              </li>
              <li><a href="contact">Contact</a></li>
            </ul>
          </div>
          <div class="top-bar-right">
            <ul class="menu">
              <li><input type="search" placeholder="Search"></li>
              <li><button type="button" class="button">Search</button></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
    <section role="main">  
      <div class="row">
        <div class="small-12 columns">
          <p><br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br></p>
            <figure>
              <img src="content/2-projects/1-project-a/forrest.jpg" alt="Project A">
            </figure>  
        </div>
      </div><!-- .row -->
    </section>
  <script src="assets/js/vendor/jquery.min.js"></script>
  <script src="assets/js/vendor/what-input.min.js"></script>
  <script src="assets/js/foundation.min.js"></script>
  <script src="assets/js/app.js"></script>
 </body>
</html>

Aaron J. over 3 years ago

I hear what you are saying Brian, but I am not in that camp. Sticky is fine on its own as a separate component, IMO. I preferred the top-bar with a fixed data attribute to.... well.... be a "fixed" bar at The Top (simple idea, should be easy has heck). My 2 cents, says is fundamentally a mistake merging the two concepts as catch-all... It has been nothing short of a nightmare after you start introducing other components... For example, I have had issues with Reveal, Magellan, and others... weird behaviors to broken...

From what I can tell, the majority of MY issues are derivatives of dealing with the sticky/sticky container to persist a Top-Bar. For my tastes, a fixed top-bar is core and elementary... I should be... and it was .... Now, the hours are mounting dealing with the derivative issues... I am almost ready to punt....

Sorry, I think I just wanted to vent briefly... :-)

-aj

Brian Tan over 3 years ago

I could be wrong, but I think the sticky element is designed to be sticky between a pair of top and bottom anchors, so you can have "sectional" sticky elements.

You can try to add a bottom anchor too before page footer and use topAnchor and botAnchor options to see if it helps.

Sticky elements (especially top bar) are sort of wasting real estate especially on phones, that's why it was turned off by default on .small .

Just my 2 cents.

Brett Mason over 3 years ago

Just in case this helps anyone I setup a Codepen the other day to help someone else with a similar issue: http://codepen.io/brettsmason/pen/adbYXV

The only quirk I've found is having to set the .sticky element to be 100% width. Also the anchor element seems to be important - not sure if its a bug or not.

Magda Jans over 3 years ago

Thanks so much Brian.

I have the same issue. Its seems that the sticky topbar is a very fragile thing. I noticed that (with Brian's code) the topbar sometimes behaves as it should but sometimes not - and it vanishes with scrolling as soon as an image appears. With only text the topbar works nicely.

So I wonder whether there is a conflict with the way Foundation 6 handles images. I also wondered whether there is a conflict between my CMS (Kirby) and Foundation. But when I just copy the source code as html and then save it and display this html page the same issue occurs - the sticky topbar works sometimes, sometimes not.

Any ideas here?

Also I agree that this could be solved more elegantly and that it would be great to have a working example of the sticky topbar in the documentation so that one only needs to copy the code. I made friends with Foundation 6 immediately but I think the stickyness of the topbar was a very easy thing to do in Foundation 5. Just add the sticky class and you have it. Since a sticky topbar is such a basic thing it should work by default - imho.

Yan Wong over 3 years ago

That explains it. Thanks. Again, something useful for the documentation, I feel.

Brian Tan over 3 years ago

Set the minimum media query breakpoint to "small". Default only sticky on medium and above

  <div style="width:100%" class="sticky" data-sticky
    data-options="marginTop:0;anchor:stickhere;stickyOn:small">

Yan Wong over 3 years ago

@Brian Tan: I spoke too soon. Your fix works for wide browser windows, but the even with your fix in, the menubar disappearing behaviour returns in my browser (safari, OS X 10.9.5) when the window drops to <600px wide. Sorry.

Yan Wong over 3 years ago

@Brian Tan that's super-helpful. Thanks a lot, and I hope this can all be documented (and fixed if necessary) in the new foundation 6 docs.

Yan

Brian Tan over 3 years ago

@Rafi Benkual can you confirm if this is a bug or is intended?

Brian Tan over 3 years ago

I trace the problem to bug(?) in calculating bottomPoint in _setBreakPoints, when top-bar to be made sticky.

You could bypass this issue by adding an anchor element.

<div id="stickHere" />
<div data-sticky-container>
  <div style="width:100%" class="sticky" data-sticky
     data-options="marginTop:0;anchor:stickHere;">

Yan Wong over 3 years ago

p.s. this is foundation 6.0.5 from the cli (npm install --global foundation-cli). Apologies about the extra /ol close tag in the example above - but removing that doesn't resolve the problem for me.

Yan Wong over 3 years ago

That's great, thanks. On Safari I seen an odd effect whereby some way down the page, the sticky bar then disappears. For instance, if I scroll to the bottom of the the following page (Safari Version 9.0.2), the sticky bar has scrolled off the top. Do you see the same, or is it just my setup?

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>blah</title>
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
<!-- NAVIGATION AREA -->
<div data-sticky-container>
  <div style="width:100%" class="sticky" data-sticky data-options="marginTop:0;">
    <div class="top-bar">
       <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menubutton"><a href="index.html">Home</a></li>
          <li class="has-submenu">
            <a href="#">About</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>
        </ul>
      </div>
    </div>
  </div>
</div>
    <!-- CONTENT AREA -->
<div class="row">
  <div class="small-12 medium-6 large-4 columns">    
    TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br /> TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />
    </ol>
  </div>
</div>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Brian Tan over 3 years ago

Just wrap your dropdown menu or whatever content with 2 data-sticky containers. Style and options to taste.

http://foundation.zurb.com/sites/docs/sticky.html

<div  data-sticky-container>
  <div style="width:100%" class="sticky" data-sticky data-options="marginTop:0;">
    Lorem ipsum dolos
  </div>
</div>

Feather Light over 3 years ago

Up up
Same with this question

I added some question :
What equal with class="contain-to-grid" or "fixed" or "sticky"
like in http://foundation.zurb.com/sites/docs/v/5.5.3/components/topbar.html#positioning-the-bar
In Foundation 6 ?

It's added manualy ?
Any "Best Practice" to do that ?