Menu icon Foundation
.fixed navbar overlaps rest of page

New here and trying to lean foundation.
I have a navbar and I have used .fixed to fix it to the top of the screen.
However whatever i do it overlaps the text at the top of my page, I can't work out how to position the rest of my page so that it starts underneath the navbar, any help please

navnavigationMagellan

New here and trying to lean foundation.
I have a navbar and I have used .fixed to fix it to the top of the screen.
However whatever i do it overlaps the text at the top of my page, I can't work out how to position the rest of my page so that it starts underneath the navbar, any help please

Karl Ward about 5 years ago

The thing with the .fixed class that you are adding, is that it simply sets position: fixed; in the css (and it should) ... When using fixed positioning, the fixed element will stick to a specific position in the viewport and and the rest of the page will move behind it. You might want to check out the Foundation Magellan plugin, because since version 5.0.3, it adds an empty div tag to the content so that the fixed element does not overlap the page (unless scrolled). You don't need to use any of the sub-nav stuff, just use <div data-magellan-expedition="fixed">:
http://foundation.zurb.com/docs/components/magellan.html

Optionally, you can still use the fixed class, but then you need to add some padding or margin to push the page content down below the top-bar.

Rafi Benkual about 5 years ago

We do have a fix for magellan positioning coming out in 5.1 today. After that is released, you can upgrade to see if that helps your situation.