Menu icon Foundation
Sticky nav not sticky on mobile

Hello. I am using the sticky nav to make my nav sticky. Logical so far..

It's working fine except on mobile, where the sticky just isn't working. I'm thinking maybe it's on purpose ? But i'd like to have the navigation sticky anyway. It just makes more sense.

Any idea how to fix this ?

Here's my bit of code so far : 

<div data-sticky-container="" class="sticky-container">
    <header id="masthead" class="site-header sticky reveler" role="banner" data-sticky data-options="marginTop:0;stickTo:top;" style="width:100%">
        <nav id="site-navigation" class="main-navigation top-bar" role="navigation">
            <div class="top-bar-left">
                blablabla
            </div>
            <div class="top-bar-right">
               blablablablabla
            </div>
        </nav>
    </header>
</div>

FoundationSticky navstickypluginjavascript

Hello. I am using the sticky nav to make my nav sticky. Logical so far..

It's working fine except on mobile, where the sticky just isn't working. I'm thinking maybe it's on purpose ? But i'd like to have the navigation sticky anyway. It just makes more sense.

Any idea how to fix this ?

Here's my bit of code so far : 

<div data-sticky-container="" class="sticky-container">
    <header id="masthead" class="site-header sticky reveler" role="banner" data-sticky data-options="marginTop:0;stickTo:top;" style="width:100%">
        <nav id="site-navigation" class="main-navigation top-bar" role="navigation">
            <div class="top-bar-left">
                blablabla
            </div>
            <div class="top-bar-right">
               blablablablabla
            </div>
        </nav>
    </header>
</div>
Ryan Patterson over 1 year ago

Hi Marine,

 

Have you tried using  data-sticky-on="small" attribute? Since you are using data-options you may be able to use stickyOn:small;, but can't say for sure.

Sorry, I can't verify this yet. I'm just going off of what I found in the F6 docs Sticky Plugin Options section - http://foundation.zurb.com/sites/docs/sticky.html

 

Ryan

Marine Le Borgne over 1 year ago

Thank you it works perfectly!

Bernard Latanowicz about 1 year ago

Hi I'd like to ask you for help.

 

I want to use sticky top bar as well.

It works fine on medium and large.

When I shrink my Chrome it changes to hamburger and it works as well.

But when I turn on mobile mode in the dev tools the sticky top bar doesn't work.

 

Let me show you.

Mobile mode is off here and page is scrolled down.

Mobile mode is off

 

 

 

Mobile mode is on, page is NOT scrolled down - this is the top of the page.

 

 

Mobile mode is on, the page is scrolled down.

 

Mobile mode is on, the page is scrolled down and menu is toggle to be visible. The hamburger icon disappears.

 

 

 

Here is my code:

<div class="sticky-container" data-sticky-container>
	<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0;" data-sticky-on="small">
		<div class="title-bar" data-responsive-toggle="main-nav" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle="main-nav"></button>
			<!--<div class="title-bar-title">iOS 11 is coming</div>-->
		</div>

		<div class="top-bar" id="main-nav">
			<div class="top-bar-left">
				<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu="drilldown medium-dropdown">
					<li><a data-i18n="nav.whenToUpgrade" href="#when-to-upgrade"></a></li>
<!-- I removed other list items -->
				</ul>
			</div>
			<div class="top-bar-right">
				<a class="logo" href="http://roche.com"><img src="{{root}}assets/img/logo.png"
			</div>
		</div>
	</div>
</div>

 

 

 

 

I'll be grateful fro helping me.

 

Regards,

Bernard

 

 

vondes vondes 8 months ago

Is it work on the https://mobile-phone-tracker.org mobile recorder on Android?

annysmith 7 days ago

Actually, now I’m wondering why it would show the nav bar plus mobile menu at the top anyways.. mobile version should only show the mobile menu or contact HP Support team and not the nav menu anyways, right?