CODEWITHSUNDEEP
css
CreateSean
CreateSean

Reputation: 1386

Foundation 3 - dropdown menu pushes down page, how to prevent this?

I'm building a responsive site using Foundation 3 and I've got a dropdown menu that when at smaller screen sizes is pushing down the content rather than overlaying the content below. I'm not sure why this is happening or what I may have done to cause this.

The site in question is here. There's a couple of other issues with the site, but this is the one that's got me really flummoxed.

What is the best way to fix it so the drop down is not pushing down the rest of the content?

Upvotes: 2

Views: 3658

Answers (3)

James Harrington
James Harrington

Reputation: 3226

For Foundation 5 i just created this hack for myself figured id share it.

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

Upvotes: 1

Pierce Butler
Pierce Butler

Reputation: 215

Just add:

<nav class="top-bar" data-options="scrolltop: false">

or on initialization:

$(document).foundation('topbar', {scrolltop: false});

To stop all that horrible jumping

Upvotes: 0

Phil Bozak
Phil Bozak

Reputation: 2822

Not sure if you were looking for a solution specific to your framework but here are the changes I made to do what you requested.

.nav-bar.right {
  position:absolute;
  z-index:100;
  background-color:#fff;
  top:5px;
  border:2px solid #ccc;
  border-top-width:0px;
}

.top-bar.expanded {
  overflow:visible;
}

Seems to work pretty well (I only tested in Chrome 26). Feel free to tweak as you need!

Upvotes: 2

Related Questions