Menu icon Foundation
Stop nav bar pushing content down page

Really like foundation and massively speeds up my work.
Just wondering in there is any way to stop the mobile menu push the rest on the page content down the page then it is activated/expanded?

dropdowntopbar

Really like foundation and massively speeds up my work.
Just wondering in there is any way to stop the mobile menu push the rest on the page content down the page then it is activated/expanded?

This post has been closed. No new replies can be added.

Rafi Benkual over 5 years ago

Can you link us to the example so we can see what's happening?

fanfarian over 5 years ago

Pushing down the content is standard behavior for the topbar on mobile.
It would be nice to have an option for overlaying the content like on the "desktop" version.

This example pushes the content down: http://responsive-nav.com/
This example overlays the content: http://slicknav.com/

-> Resize those pages to make the mobile menu visible

Vinay Raghu over 5 years ago

I'd +1 this. Bootstrap overlays the menu as well. While you are at this I want to add a nitty gritty really. Its a very low priority thing but since the positioning and the hamburger icon is being generated by text shadows, if you tap on it, the area that gets highlighted is kind of odd.

It would be awesome if that component works as though its actually a button. Right now it really affects how users interact with it. Please can you also rework that?

Chung Kang over 5 years ago

Hey Alec,

I was trying to have the topbar menu overlay my content area of the page and found that this worked for me:

or on initialization:

$(document).foundation('topbar', {scrolltop: false});
To stop all that horrible jumping

source: http://stackoverflow.com/a/23385892

hope that helps!

Jean-Michel Godin over 4 years ago

Hey Chung,

Doing this worked for me:

.top-bar.expanded {
overflow:visible;
}
.top-bar-section ul {
position: absolute;
right: 0;
}

Only issue is that when you have a dropdown menu height is getting set in JS which pushes down the content when you open the dropdown.

Commenting out the line 242 from foundation.topbar.js did the trick but is there a more elegant way of preventing it from setting the height without modifying the actual plugin?

(// topbar.css('height', $this.siblings('ul').outerHeight(true) + topbar.data('height'));)

Rafi Benkual over 4 years ago

Looks like you figured it out: http://codepen.io/rafibomb/pen/QwZMjr

While I don't like the idea of hiding content, it's really up to the designer to use this wisely. Thanks for posting the solution!