Menu icon Foundation
Responsive menu pushes down page content

Hi,

thanks for making Foundation and supporting it. Since I found Foundation my life as a web developer has become better!

I‘d be glad if someone could help me? I have been using Foundation for a couple of websites. Now I "cloned" a website that I had made with Foundation 6.3.1 and made a new one with Foundation 6.4.2. Everythings works except for one detail:

I have a responsive menu with top bar, title bar and drilldown menu. When opened in Foundation 6.3.1 the drilldown menu overlayed the content of the page. In Foundation 6.4.2 it pushes down the content of the page what I would prefer to avoid.

Perhaps this has something to do with the xy grid? I tried everything with css, studied your documentation and the forum but couldn't get a solution.

Here is the code (the {tags} come from my CMS and produce the ul):

  <body>
  	
	 <!-- Start Top Bar -->
	 <div class="title-bar" data-responsive-toggle="movere-Menu" data-hide-for="medium">
	   <button class="menu-icon" type="button" data-toggle="movere-Menu"></button>
	   <div class="title-bar-title">Menü</div>
	 </div>
	 
	 <div data-sticky-container>
	   <div class="top-bar" data-sticky  data-options="marginTop:0;" style="width:100%" id="movere-Menu" data-animate="slide-in-left slide-out-left">
	       <div class="top-bar-left">
	               {Navigator}
	       </div>
	       <div class="top-bar-right">
				{search}
	       </div>
	   </div>
	</div>
	 <!-- End Top Bar -->	 

Could anybody help or give me a hint?

Thanks a lot in advance

 

Reinhard

 

 

 

 

responsive menutitle bartop barpush content

Hi,

thanks for making Foundation and supporting it. Since I found Foundation my life as a web developer has become better!

I‘d be glad if someone could help me? I have been using Foundation for a couple of websites. Now I "cloned" a website that I had made with Foundation 6.3.1 and made a new one with Foundation 6.4.2. Everythings works except for one detail:

I have a responsive menu with top bar, title bar and drilldown menu. When opened in Foundation 6.3.1 the drilldown menu overlayed the content of the page. In Foundation 6.4.2 it pushes down the content of the page what I would prefer to avoid.

Perhaps this has something to do with the xy grid? I tried everything with css, studied your documentation and the forum but couldn't get a solution.

Here is the code (the {tags} come from my CMS and produce the ul):

  <body>
  	
	 <!-- Start Top Bar -->
	 <div class="title-bar" data-responsive-toggle="movere-Menu" data-hide-for="medium">
	   <button class="menu-icon" type="button" data-toggle="movere-Menu"></button>
	   <div class="title-bar-title">Menü</div>
	 </div>
	 
	 <div data-sticky-container>
	   <div class="top-bar" data-sticky  data-options="marginTop:0;" style="width:100%" id="movere-Menu" data-animate="slide-in-left slide-out-left">
	       <div class="top-bar-left">
	               {Navigator}
	       </div>
	       <div class="top-bar-right">
				{search}
	       </div>
	   </div>
	</div>
	 <!-- End Top Bar -->	 

Could anybody help or give me a hint?

Thanks a lot in advance

 

Reinhard

 

 

 

 

Rafi Benkual over 1 year ago

Are looking to make the dropdown overlay instead?

You can make the top-bar position absolute on small screens

@media screen and (max-width: 39.9375em) {
  .top-bar {
    position: absolute;
  }
}

Reinhard Mohr over 1 year ago

Hi, Rafi,

thanks for helping. This brought me to the idea where to search for the problem. But nonetheless the menu is not working as expected, yet.

The problem is the sticky plug-in. When active on the small screen it adds a class of .sticky-container with position="relative". So when I use sticky I can't get the menu on a small screen to overlay because it's inside a relative-positioned div.

Whenever I override the class .sticky-container with position="absolute" the menu on a small screen won't slide out.

 

As far as I see there are only two solutions for me:

  1. I can either choose between the menu being sticky on a bigger screen and the menu overlaying on a small screen – but I can't have both.
  2. Or I could delete the "Responsive Toggle with animation" from my menu and make two different sets of menus. The one being sticky and only visible from medium upwards. And a second non-sticky menu to only show on a small screen. 

If there is something else I can do – I'd be thankful for leraning it!

Thanks a lot

Reinhard