Menu icon Foundation
F6 Sticky plugin injects unwanted style attribute

I am following the Zurb-provided tutorial  I found in the forums to reproduce the F5 responsive top-bar navigation using F6 and everything is working pretty well (pre-compiled CSS, no SASS) but I also want to mke the top-bar sticky. I got the sticky plug-in working but in F6 it appears that the sticky plug-in injects a style attribute for the height of the sticky-container and sets the positioning of the the .sticky class to absolute with a z-index property of 1. This results in a menu which slides over the top of the page content for tablets and smartphones instead of pushing the page content down.

in F5 the sticky responsive menu did not use absolute positioning or z-indexes and would just force the page content down when the menu was expanded. This is what I am attempting to reproduce using F6 code.

I know I can override the postioning attributes in my app.css and I've managed to get it to work the way I want it to using the Chrome property inspector to modify the code in the browser but it seems the key to getting this all to work as it did in F5 is to prevent the style="height:52px;" attribute that the plugin is injecting at runtime.

I've tried adding sticky {height:none !important} to my app.css and even setting my own style attribute in the HTML but to no avail. Any ideas on how to prevent the F6 Sticky plugin from injecting this style attribute into my page's HTML at runtime?

 

Here's my code as written in my IDE...

<header id="page-top">
	<div id="menu-container" data-sticky-container>
		<div id="sticky-mobilemenu" class="sticky" data-sticky data-options="stickTo:top; marginTop:0; stickyOn:small;">
			<div class="title-bar clearfix" data-responsive-toggle="main-menu" data-hide-for="large"> <a href="/" title="PSRS/PEERS home page"><img class="float-left" src="img/PSRSPEERS_logo_sm.png" alt="company logo" /></a>
				<button class="menu-icon float-right" type="button" data-toggle></button>
			</div>
			<div class="top-bar" id="main-menu">
				<div class="top-bar-left"><a href="/" title="PSRS/PEERS home page"><img class="show-for-large" src="img/PSRSPEERS_logo_sm.png" alt="company logo" /></a> </div>
				<div class="top-bar-right">
					<ul class="menu vertical large-horizontal" data-responsive-menu="drilldown large-dropdown">
						<li class="has-submenu"><a href="#">PSRS</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 class="has-submenu"><a href="#">PEERS</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 class="has-submenu"><a href="#">Employers</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 class="has-submenu"><a href="#">Investments</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 class="has-submenu"><a href="#">Legislation</a>
							<ul class="submenu menu vertical" data-submenu>
								<li><a href="#">One</a></li>
								<li><a href="#">Two</a></li>
								<li><a href="#">really long button label Three</a></li>
							</ul>
						</li>
						<li class="has-submenu"><a href="#">About Us</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>
								<li class="has-submenu"><a href="#">Four</a>
									<ul class="submenu menu vertical">
										<li><a href="#">One</a></li>
										<li><a href="#">Two</a></li>
										<li><a href="#">Three</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<button class="searchToggle small hollow button expanded" type="button" data-toggle="example-dropdown" title="toggle search form"><img src="img/search-icon.png"></button>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="searchBox dropdown-pane bottom" id="example-dropdown" data-dropdown data-auto-focus="true">
		<div class="input-group">
			<input class="input-group-field" type="text" placeholder="enter search terms">
			<div class="input-group-button">
				<input type="submit" class="button" value="Search">
			</div>
		</div>
	</div>
</header>

 

And here's my code as rendered in the browser (note the style="height..." attribute in the sticky-container wrapper)...

<header id="page-top">
	<div id="menu-container" data-sticky-container class="sticky-container" style="height: 52px;">
		<div id="sticky-mobilemenu" class="sticky" data-sticky="qz7zf3-sticky" data-options="stickTo:top; marginTop:0; stickyOn:small;" data-resize="sticky-mobilemenu" style="max-width: 841px;">
			<div class="title-bar clearfix" data-responsive-toggle="main-menu" data-hide-for="large"> <a href="/" title="PSRS/PEERS home page"><img class="float-left" src="img/PSRSPEERS_logo_sm.png" alt="company logo"></a>
				<button class="menu-icon float-right" type="button" data-toggle=""></button>
			</div>
			<div class="top-bar" id="main-menu" style="display: none;">
				<div class="top-bar-left"><a href="/" title="PSRS/PEERS home page"><img class="show-for-large" src="img/PSRSPEERS_logo_sm.png" alt="company logo"></a> </div>
				<div class="top-bar-right">
					<div class="is-drilldown" style="height: 282.625px; width: 841px;"><ul class="menu vertical large-horizontal drilldown" data-responsive-menu="drilldown large-dropdown" role="menubar" data-drilldown="xwbsj5-drilldown">
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="PSRS"><a tabindex="0">PSRS</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="PEERS"><a>PEERS</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Employers"><a>Employers</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Investments"><a>Investments</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Legislation"><a>Legislation</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">really long button label Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="About Us"><a>About Us</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
								<li class="has-submenu is-drilldown-submenu-parent is-submenu-item is-drilldown-submenu-item" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Four"><a>Four</a>
									<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
										<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
										<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
										<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li role="menuitem">
							<button class="searchToggle small hollow button expanded" type="button" data-toggle="example-dropdown" title="toggle search form" aria-controls="example-dropdown" data-is-focus="false" data-yeti-box="example-dropdown" aria-haspopup="true" aria-expanded="false"><img src="img/search-icon.png"></button>
						</li>
					</ul></div>
				</div>
			</div>
		</div>
	</div>
	<div class="searchBox dropdown-pane bottom" id="example-dropdown" data-dropdown="rhsz1c-dropdown" data-auto-focus="true" aria-hidden="true" data-yeti-box="example-dropdown" data-resize="example-dropdown" aria-labelledby="e7n8xo-dd-anchor">
		<div class="input-group">
			<input class="input-group-field" type="text" placeholder="enter search terms">
			<div class="input-group-button">
				<input type="submit" class="button" value="Search">
			</div>
		</div>
	</div>
</header>

 

stickytop-barresponsive menuF6

I am following the Zurb-provided tutorial  I found in the forums to reproduce the F5 responsive top-bar navigation using F6 and everything is working pretty well (pre-compiled CSS, no SASS) but I also want to mke the top-bar sticky. I got the sticky plug-in working but in F6 it appears that the sticky plug-in injects a style attribute for the height of the sticky-container and sets the positioning of the the .sticky class to absolute with a z-index property of 1. This results in a menu which slides over the top of the page content for tablets and smartphones instead of pushing the page content down.

in F5 the sticky responsive menu did not use absolute positioning or z-indexes and would just force the page content down when the menu was expanded. This is what I am attempting to reproduce using F6 code.

I know I can override the postioning attributes in my app.css and I've managed to get it to work the way I want it to using the Chrome property inspector to modify the code in the browser but it seems the key to getting this all to work as it did in F5 is to prevent the style="height:52px;" attribute that the plugin is injecting at runtime.

I've tried adding sticky {height:none !important} to my app.css and even setting my own style attribute in the HTML but to no avail. Any ideas on how to prevent the F6 Sticky plugin from injecting this style attribute into my page's HTML at runtime?

 

Here's my code as written in my IDE...

<header id="page-top">
	<div id="menu-container" data-sticky-container>
		<div id="sticky-mobilemenu" class="sticky" data-sticky data-options="stickTo:top; marginTop:0; stickyOn:small;">
			<div class="title-bar clearfix" data-responsive-toggle="main-menu" data-hide-for="large"> <a href="/" title="PSRS/PEERS home page"><img class="float-left" src="img/PSRSPEERS_logo_sm.png" alt="company logo" /></a>
				<button class="menu-icon float-right" type="button" data-toggle></button>
			</div>
			<div class="top-bar" id="main-menu">
				<div class="top-bar-left"><a href="/" title="PSRS/PEERS home page"><img class="show-for-large" src="img/PSRSPEERS_logo_sm.png" alt="company logo" /></a> </div>
				<div class="top-bar-right">
					<ul class="menu vertical large-horizontal" data-responsive-menu="drilldown large-dropdown">
						<li class="has-submenu"><a href="#">PSRS</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 class="has-submenu"><a href="#">PEERS</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 class="has-submenu"><a href="#">Employers</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 class="has-submenu"><a href="#">Investments</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 class="has-submenu"><a href="#">Legislation</a>
							<ul class="submenu menu vertical" data-submenu>
								<li><a href="#">One</a></li>
								<li><a href="#">Two</a></li>
								<li><a href="#">really long button label Three</a></li>
							</ul>
						</li>
						<li class="has-submenu"><a href="#">About Us</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>
								<li class="has-submenu"><a href="#">Four</a>
									<ul class="submenu menu vertical">
										<li><a href="#">One</a></li>
										<li><a href="#">Two</a></li>
										<li><a href="#">Three</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<button class="searchToggle small hollow button expanded" type="button" data-toggle="example-dropdown" title="toggle search form"><img src="img/search-icon.png"></button>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="searchBox dropdown-pane bottom" id="example-dropdown" data-dropdown data-auto-focus="true">
		<div class="input-group">
			<input class="input-group-field" type="text" placeholder="enter search terms">
			<div class="input-group-button">
				<input type="submit" class="button" value="Search">
			</div>
		</div>
	</div>
</header>

 

And here's my code as rendered in the browser (note the style="height..." attribute in the sticky-container wrapper)...

<header id="page-top">
	<div id="menu-container" data-sticky-container class="sticky-container" style="height: 52px;">
		<div id="sticky-mobilemenu" class="sticky" data-sticky="qz7zf3-sticky" data-options="stickTo:top; marginTop:0; stickyOn:small;" data-resize="sticky-mobilemenu" style="max-width: 841px;">
			<div class="title-bar clearfix" data-responsive-toggle="main-menu" data-hide-for="large"> <a href="/" title="PSRS/PEERS home page"><img class="float-left" src="img/PSRSPEERS_logo_sm.png" alt="company logo"></a>
				<button class="menu-icon float-right" type="button" data-toggle=""></button>
			</div>
			<div class="top-bar" id="main-menu" style="display: none;">
				<div class="top-bar-left"><a href="/" title="PSRS/PEERS home page"><img class="show-for-large" src="img/PSRSPEERS_logo_sm.png" alt="company logo"></a> </div>
				<div class="top-bar-right">
					<div class="is-drilldown" style="height: 282.625px; width: 841px;"><ul class="menu vertical large-horizontal drilldown" data-responsive-menu="drilldown large-dropdown" role="menubar" data-drilldown="xwbsj5-drilldown">
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="PSRS"><a tabindex="0">PSRS</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="PEERS"><a>PEERS</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Employers"><a>Employers</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Investments"><a>Investments</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Legislation"><a>Legislation</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">really long button label Three</a></li>
							</ul>
						</li>
						<li class="has-submenu is-drilldown-submenu-parent" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="About Us"><a>About Us</a>
							<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
								<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
								<li class="has-submenu is-drilldown-submenu-parent is-submenu-item is-drilldown-submenu-item" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Four"><a>Four</a>
									<ul class="submenu menu vertical is-drilldown-submenu" data-submenu="" aria-hidden="true" role="menu" tabindex="0"><li class="js-drilldown-back"><a>Back</a></li>
										<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">One</a></li>
										<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Two</a></li>
										<li role="menuitem" class="is-submenu-item is-drilldown-submenu-item"><a href="#">Three</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li role="menuitem">
							<button class="searchToggle small hollow button expanded" type="button" data-toggle="example-dropdown" title="toggle search form" aria-controls="example-dropdown" data-is-focus="false" data-yeti-box="example-dropdown" aria-haspopup="true" aria-expanded="false"><img src="img/search-icon.png"></button>
						</li>
					</ul></div>
				</div>
			</div>
		</div>
	</div>
	<div class="searchBox dropdown-pane bottom" id="example-dropdown" data-dropdown="rhsz1c-dropdown" data-auto-focus="true" aria-hidden="true" data-yeti-box="example-dropdown" data-resize="example-dropdown" aria-labelledby="e7n8xo-dd-anchor">
		<div class="input-group">
			<input class="input-group-field" type="text" placeholder="enter search terms">
			<div class="input-group-button">
				<input type="submit" class="button" value="Search">
			</div>
		</div>
	</div>
</header>

 

Chris Davis over 3 years ago

After wrestling with this issue for a couple of days I decided to use a little jquery to remove the style attribute but then came to the realization that I may be jousting at windmills. By removing the inline style attribute for the height of the #menu-container div and setting the .sticky-container div to position:relative I was able to make the menu slide down and push the page content down as needed to accomodate the height of the expanded menu, but I noticed two things, 1.) the desired behavior only worked if the user had not scrolled down the page at all, otherwise the menu still covered the page content which makes sense considering the DOM flow, 2.) removing the height attribute from #menu-container div caused the top-bar to have a 1REM top-margin that would appear as the user scrolled from the bottom back to the top of the page and 3.) considering the effect described in points #1 and #2, it was probably better from a user-experience/consistency-sake for the menu to always slide out to cover the page content. So for now I've decided to not fight against the framework and use the default behavior.