Menu icon Foundation
Sticky accordion incompatiblity ?

Hi there,

Need insights on how to solve this, i´ve made a responsive menu, using sticky accordion menu for large and drilldown menu for small.

The thing is, that when using accordion and sticky together the displayed sub-menu overlaps the footer and doesn´t push the content as it should.

Here´s print screen:

accordion closed

accordion opened

 

<section  class="row column" id="includeGeneral">
HERE GOES AN INSERTED JAVA SCRIPT CONTENT
        </section><br>


      	</div>
      	
		<div class="small-12 small-order-1 medium-order-2 large-3 columns sticky-container"  data-sticky-container id="colo-menu">
		<div class="row align-right">
		<div class="title-bar text-right" data-responsive-toggle="example-menu" data-hide-for="medium" id="nico">
			<ul class="menu">
			  <li class="size-24"><a href="#" data-toggle> <span class="light">Áreas</span>  <i class="mdi-navigation-arrow-drop-down-circle"></i> </a></li>
			</ul>
		</div>
		</div>
		<div class="small-12 column sticky"  data-sticky  data-options="marginTop:0;"  data-anchor="colo-menu">
			<ul class="vertical menu bg-ghost" id="example-menu" data-responsive-menu="drilldown large-accordion" data-closable>
			  <h4 class="hide-for-small-only light">Áreas</h4>
			  <li data-close="example-menu"><a href="#inicio" id="m-inicio">Inicio</a></li>
			  <li data-close="example-menu"><a href="#introduccion" id="m-introduccion">Introducción</a></li>
			  <li data-close="example-menu"><a href="#">Modalidad</a>
				<ul class="menu vertical nested">
					<li><a href="#">Modalidad organizativa</a></li>
					<li><a href="#">Comisiones especificas</a></li>
					<li><a href="#">Aporte científico técnico en relación al sector alimentos</a></li>
				</ul>
			  </li>
			  <li data-close="example-menu"><a href="#alcances" id="m-alcances">Alcances</a></li>
			  <li data-close="example-menu"><a href="#">Sectores involucrados</a></li>
			  <li data-close="example-menu"><a href="#">Novedades</a></li>
			</ul>
		</div>
		</div>
	</div>

stickyaccordionmenuresponsive menudrilldown

Hi there,

Need insights on how to solve this, i´ve made a responsive menu, using sticky accordion menu for large and drilldown menu for small.

The thing is, that when using accordion and sticky together the displayed sub-menu overlaps the footer and doesn´t push the content as it should.

Here´s print screen:

accordion closed

accordion opened

 

<section  class="row column" id="includeGeneral">
HERE GOES AN INSERTED JAVA SCRIPT CONTENT
        </section><br>


      	</div>
      	
		<div class="small-12 small-order-1 medium-order-2 large-3 columns sticky-container"  data-sticky-container id="colo-menu">
		<div class="row align-right">
		<div class="title-bar text-right" data-responsive-toggle="example-menu" data-hide-for="medium" id="nico">
			<ul class="menu">
			  <li class="size-24"><a href="#" data-toggle> <span class="light">Áreas</span>  <i class="mdi-navigation-arrow-drop-down-circle"></i> </a></li>
			</ul>
		</div>
		</div>
		<div class="small-12 column sticky"  data-sticky  data-options="marginTop:0;"  data-anchor="colo-menu">
			<ul class="vertical menu bg-ghost" id="example-menu" data-responsive-menu="drilldown large-accordion" data-closable>
			  <h4 class="hide-for-small-only light">Áreas</h4>
			  <li data-close="example-menu"><a href="#inicio" id="m-inicio">Inicio</a></li>
			  <li data-close="example-menu"><a href="#introduccion" id="m-introduccion">Introducción</a></li>
			  <li data-close="example-menu"><a href="#">Modalidad</a>
				<ul class="menu vertical nested">
					<li><a href="#">Modalidad organizativa</a></li>
					<li><a href="#">Comisiones especificas</a></li>
					<li><a href="#">Aporte científico técnico en relación al sector alimentos</a></li>
				</ul>
			  </li>
			  <li data-close="example-menu"><a href="#alcances" id="m-alcances">Alcances</a></li>
			  <li data-close="example-menu"><a href="#">Sectores involucrados</a></li>
			  <li data-close="example-menu"><a href="#">Novedades</a></li>
			</ul>
		</div>
		</div>
	</div>
Rafi Benkual over 3 years ago

You'll want to set a bottom "stop" for the sticky part. You might try setting the bottom anchor

data-btm-anchor='root:footer'

So if your footer has an id="footer" then you are telling the sticky plugin to stop there.

Alejandro over 3 years ago

thank you very much for the reply, i´m afraid it didn´t work, and i think it´s because the main content, on the left side of the menu, load the info dinamically, so the sticky part, doesn´t know where´s the if="footer", so won´t stop right there. Is it possible ?

regards

Konstantinos about 3 years ago

I dont know if it's too late,

but you can place data-check-every="0" to check sticky status in every scroll.

Cheers