CODEWITHSUNDEEP
cssmenuhtml-listsz-indexzurb-foundation
Hank Janssens
Hank Janssens

Reputation: 1

Zurb foundation Menu getting cut off

I have created a website using zurb foundations. My problem is this. When I bring the browser size and the navigation menu changes from the categories to the word "Menu" I am able to click it and choose which category I would like to navigate to. However, when I choose a category that has four or more options the fourth and all others below that seem to be getting cut off. I have tried to change the z-index of certain elements to make up for this and a few other things but I am having no luck in resolving this. I looked on here for similar issues but had no luck finding this same problem. Can anyone be of assistance?

Upvotes: 0

Views: 571

Answers (2)

jeteon
jeteon

Reputation: 3729

I've come across a similar issue as well. Its strange. I tried the work around of adding an additional item suggested by Dan but the space (albeit cutoff) was too big for my liking. In my case it was a <ul> list with links. What seems to work for me is setting the bottom margin on the last element like so:

<ul class='dropdown'>
   <li><a href='#link'>Item 1</a></li>
   <li><a href='#link'>Item 2</a></li>
   ...
   <li><a href='#link' style='margin-bottom:1em;'>Item n</a></li>
</ul>

Alternatively, to keep the markup cleaner and keep styling out of it, you could have CSS:

.problem-dropdown li:last-child
{
    margin-bottom: 1em;
}

And then add the class problem-dropdown to the dropdown that gives you issues.

If you have the time, the issue is caused by the code that sets the height of the nav.top-bar.expanded element. Setting the margin-bottom as above can make it set the right height for the menu. In my case manually increasing it solves my issue so I suppose you could write a JS listener for the event and then fix things after it. However, one might consider just fixing the code that does it in the first place.

Upvotes: 1

Dan
Dan

Reputation: 1063

I'm having the same issue. For some reason when I click a submenu when the Navigation is shrunk, it cuts it off.

enter image description here

I have tried, z-index, padding, even background color of each li a, but i believe the height is compiled from JS.

A temporary solution is to add another Div to the menu.

<li><a href="#">&nbsp;</a></li>

This get's cut off, but it doesn't matter because there is no information there. Hope this helps until a better solution is created!

Upvotes: 0

Related Questions