Menu icon Foundation
Two sticky title-bar on same site problem.

Hi,

I'm new to ZURB Foundation 6 for sites.

I have a problem with two sticky title-bar on the same site, while they are among each other.

If I scroll down the site and up again, the second sticky title-bar are worked as expected, BUT the first one are sticky too, but when I srcoll horizontal, it moves a little bit out of the screen and get a cursor on the right site.

Here is a screenshot of the problem, on real mobile devices:

title-bar scroll problem

Here my code too:

First title-bar:
================

	<div class="show-for-small-only">
		<div data-sticky-container>
			<div class="title-bar small-title-bar" data-sticky data-margin-top="0" style="width: 100%;" data-sticky-on="small">

				<div class="title-bar-left small-title-bar-left">
					<button type="button" class="button secondary button-title-bar color-00-border-bottom" data-toggle="offCanvasLeftArea"><svg class="svg" viewBox="0 0 24 24"><use xlink:href="#svg-ic_home"></use></svg></button>
				</div>
...
			</div>
		</div>
	</div>

Second title-bar (on same site):
================================

	<div class="show-for-small-only">
		<div data-sticky-container>
			<div class="title-bar small-title-bar" data-sticky data-margin-top="3.5" style="width: 100%;" data-sticky-on="small">
				
				<div class="title-bar-left small-title-bar-left">
					<button type="button" class="button secondary button-title-bar color-00-border-bottom" data-toggle="offCanvasLeftMenu"><svg class="svg" viewBox="0 0 24 24"><use xlink:href="#svg-ic_menu"></use></svg></button>
				</div>
...

			</div>
		</div>
	</div>

Please can you help me?

Thank you in andvance!
Klaus.

title-barsticky

Hi,

I'm new to ZURB Foundation 6 for sites.

I have a problem with two sticky title-bar on the same site, while they are among each other.

If I scroll down the site and up again, the second sticky title-bar are worked as expected, BUT the first one are sticky too, but when I srcoll horizontal, it moves a little bit out of the screen and get a cursor on the right site.

Here is a screenshot of the problem, on real mobile devices:

title-bar scroll problem

Here my code too:

First title-bar:
================

	<div class="show-for-small-only">
		<div data-sticky-container>
			<div class="title-bar small-title-bar" data-sticky data-margin-top="0" style="width: 100%;" data-sticky-on="small">

				<div class="title-bar-left small-title-bar-left">
					<button type="button" class="button secondary button-title-bar color-00-border-bottom" data-toggle="offCanvasLeftArea"><svg class="svg" viewBox="0 0 24 24"><use xlink:href="#svg-ic_home"></use></svg></button>
				</div>
...
			</div>
		</div>
	</div>

Second title-bar (on same site):
================================

	<div class="show-for-small-only">
		<div data-sticky-container>
			<div class="title-bar small-title-bar" data-sticky data-margin-top="3.5" style="width: 100%;" data-sticky-on="small">
				
				<div class="title-bar-left small-title-bar-left">
					<button type="button" class="button secondary button-title-bar color-00-border-bottom" data-toggle="offCanvasLeftMenu"><svg class="svg" viewBox="0 0 24 24"><use xlink:href="#svg-ic_menu"></use></svg></button>
				</div>
...

			</div>
		</div>
	</div>

Please can you help me?

Thank you in andvance!
Klaus.

Klaus Tachtler 12 days ago

Hi,

this was not a problem of the second bar, it was a problem of the "sticky is-anchored is-at-top (is-stuck)" settings, on the first "title-bar". After scrolling down the first title-bar was o.k., BUT NOT if it was (is-anchored) - then it could be moved to the left, by scrolling to the right.

Klaus.

dfjdskgfs 10 days ago

ShowBox App Download

Mobdro App Download

VidMate App Download

Thanks for sharing.I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.

 

Mitchell541 about 5 hours ago