Menu icon Foundation
How to create a Sticky Top-bar on Foundation 6

hello everyone, i;m new on this forum, i came here with the following question, is it possible to create a sticky top-bar menu on Foundation 6, like the one specified on Foundation 5 documentation:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/topbar.html

the only thing that comes to my mind is using the new, sticky js plugin but i don't know how to actually implement it with the top-bar component, any help will be welcome.

Thanks all!

foundation 6stickytop-bar

hello everyone, i;m new on this forum, i came here with the following question, is it possible to create a sticky top-bar menu on Foundation 6, like the one specified on Foundation 5 documentation:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/topbar.html

the only thing that comes to my mind is using the new, sticky js plugin but i don't know how to actually implement it with the top-bar component, any help will be welcome.

Thanks all!

Jordan Bommelje almost 3 years ago

Hey, Diego!

I'd strongly suggest checking out Magellan (http://foundation.zurb.com/sites/docs/magellan.html).

This should get you up-and-running with a sticky menu bar!

-Jordan

Diego Ramirez almost 3 years ago

I've had no luck on getting it to work, neither the examples of implementation on the Magellan docs (copy-paste) nor rewriting classes and data info into the tags of my topbar worked,

any other ideas?

Bican Marian Valeriu almost 3 years ago

Hey, if you want to see what i achived please follow this link: http://www.wecodeart.com/
Topbar is sticky but not work well on small screens...i will try to improve it but foundation 6 is kinda needs some improvements !

Bican Marian Valeriu almost 3 years ago

Update: i succeded to make it work on smaller screens but still after i click the "toggle" menu button ...the topbar comes over the menu toggler !

Update2: Everything done and works fine. Check it !

Diego Ramirez almost 3 years ago

thats exactly what i need to do!
would you please give me some insight on how to implement this? [the source code of the topbar itself]

Bican Marian Valeriu almost 3 years ago

// Create 2 containers like this

<div data-sticky-container>
<div id="header-bar" data-sticky  data-sticky-on="small"> 

// this is menu togler if u want it for small devices 
<div class="title-bar" data-responsive-toggle="top-bar" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div> 
// The actual tobar - just add the class "top-bar" for style and use columns,  it's better
<div id="top-bar" class="top-bar">
<div class="row">
    <!-- Top Bar Left Nav Elements -->  
    <div class="columns medium-2">
     </div>
    <div class="columns medium-10">
    </div>
</div>
</div>
// Close sticky container and sticky header
</div>
</div>

I implemented it in a Genesis theme skin and the code is a litle bit diferent but hope you will understand how it works. Basicaly to make it sticky you have to wrap the togler and the actual top bar in 2 containers with "data-sticky-container" and "data-sticky" to make the both elements float - togler and topbar !

Arnaud Lemaire almost 3 years ago

Hey, thanks for posting this solution.

However the "sticky-ness" stops after a few scroll down. Check on your site/this article for instance:
http://www.wecodeart.com/2014/09/11/must-have-wordpress-pluggins-to-boost-your-blog/

The sticky top-bar stops when it hits the "WP Super Cache Plugin" line (on large screen).
Similar issue with the title-bar (emulated with iPhone 5 and similar on Chrome-Developper), even funnier: it "jumps" from top to end of first section...
I would suspect a stop/jump to 100% viewport height.

Anyhow, have you found a solution / implemented somewhere else?

As I'm also interested in such top-/title-bar behaviour, I will let you know if I find anything.
Thanks.

Bican Marian Valeriu almost 3 years ago

I've noticed that but i did not found any fix for that. I guess is because of the foundation. With foundation 5 i did not had this kind of issues. Hope they will fix it soon. Also the menu from topbar is not working properly on small screens. For example, on large screen you can click on first tier link (let's say My Acount or About link) but on small screens you can't click it, if you click it will point you to the sub-items menu. Anyway i hope that example is good for you people and lets wait for fix/improvements !

Arnaud Lemaire almost 3 years ago

Ok guys, I think I nailed it.
Thanks to original work from Bican and the Magellan docs (helped me understand how the stickiness works, so thanks to Jordan too!).

   <body>
        <div id="siteContainer">
            <div id="siteNavStickyContainer" data-sticky-container>
                <div id="siteNavStickyWrap" class="sticky" data-sticky data-sticky-on="small" data-anchor="siteContainer" data-margin-top="0">
                    <div id="siteNavToggler" class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium"> 
// your title-bar / toggler code 
                    </div>
                    <div id="siteNav" class="top-bar"> 
// your top-bar code
                    </div>
                </div>
            </div>
            <div id="pageContent"> 
// your inner-page code
            </div>
        </div>
    </body>

All operates fine, any screen size, switch responsive title/top-bar both sticky.
If you need support (maybe I copy/pasted too quickly), don't hesitate to ask.
Cheers, AL

update: + CSS

#siteNavStickyWrap { width: 100%; }

Zebulon Edward Bubbel almost 3 years ago

Arnaud, you just made it! Many thanks for your efforts!

Akiowalt over 2 years ago

I have the same issue with F6 but this is how I did for the code by adding "sticky is-stuck":

<div id="data-stick-container">
    <div class="sticky is-stuck" id="data-stick-container">
        <div class="title-bar" data-responsive-toggle="menuBar" data-hide-for="medium">
            // your title-bar / toggler code 
        </div>
    </div>

    <div class="top-bar">
    // your top bar code
    </div>  
</div>

In my css (follow like what Arnaud Lemaire suggested):

#data-stick-container {
width: 100%;
}

Add this if you do not use F6 app.css

.sticky {
  position: absolute;
  z-index: 0;
  transform: translate3d(0, 0, 0);
}

.sticky.is-stuck {
  position: fixed;
  z-index: 5;
}

Rob T over 2 years ago

Excellent, thanks guys. What would you do, though, if you wanted the sticky nav to start out overlaying the section below on page load? For example, on this page, the nav would be overlaying the bridge image when the page loads, not simply on scroll:

http://telodesign.com/test/lumuno/nav-test.html

I've tried using a negative margin, which seems hacky, I've tried autoscrolling with jQuery, which leaves a gap at the top if the user scrolls up... any other ideas? Thanks!

Akiowalt over 2 years ago

You may find foundation magellan plugin is useful for this, however, I have no luck for Foundation 6. I've tried many ways but the magellan does not work.

Bican Marian Valeriu over 2 years ago

I think they fixed this in 6.1.1

Rob T over 2 years ago

I'm actually using it in this CodePen (http://codepen.io/rtourtelot/pen/obBQqE) ... but does anyone have any idea how to set it so that the bridge image is under the nav on page load? Thanks!

Arnaud Lemaire over 2 years ago

Hey Rob,

As far as my little knowledge in F6/CSS goes, I'd simply try a margin-top negative for your .hero block (as you actually suggested) by the size of your top-bar and adjusting its z-index.

You could try something like:

.hero {
// ... your original code
margin-top: -60px; // you could use a -$top-bar-size in SCSS if you calculate it beforehand
z-index: -1; // or, in any case, you define a z-index for your top-bar which should be greater than the z-index you would define for your .hero block
}

Hope this will help.
Cheers, AL

Rob T over 2 years ago

That actually did work--thanks so much, Arnaud! Not sure what I was doing wrong before, but that was it. I really appreciate your help. Cheers!

Rob T over 2 years ago

That actually did work--thanks so much, Arnaud! Not sure what I was doing wrong before, but that was it. I really appreciate your help. Cheers!

bill over 2 years ago

Does anyone know how to make a responsive menu that's sticky ONLY on small screens? 

The responsive menu has 2 elements, one shown for small screens and one for medium up. 

If I wrap the small screen menu in the sticky div, the menu bar sticks, but the accordion menu doesn't stick. 

Alternatively, if I wrap both menu elements in the sticky div, the menu sticks correctly on the small screen, but it also sticks on medium up. 

What I really need is a data-sticky-on="small-only" type of option. Is there such a thing? 

If not, anyone have any ideas on how to achieve this? 

My current code, which works fine on small screens, but also sticks unnecessarily on medium up is here: 

<nav data-sticky-container>
   <div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop:0;" style="width:100%">
		<div class="title-bar no-js" data-responsive-toggle="site-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle></button>
			<div class="title-bar-title">Menu</div>
		</div>      
	   
		<ul id="site-menu" class="no-js vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
			<li>
				<!-- menu lists go here -->
			</li>
		</ul>
	</div>  
</nav>

Bican Marian Valeriu over 2 years ago

Make 2 same menus, use .show-for-small-only class for one of them...for the other one .hide-for-small-only