Menu icon Foundation
topbar dropdown issues

I'm having some issues with my topbar dropdown menus. Can't figure out what the problem is.

1) On a wide screen, the dropdown nested ULs are too narrow. The LI items are being wrapped, when they should all only be one line. Can't see what's limiting their width.

2) On a mobile phone, the dropdown nested ULs height isn't right. They cut off right after the last lLI item. The bottom-padding of that item doesn't effect the overall size of the nested UL like it should. Can't see what's limiting the height.

I've hacked the topbar code quite a bit to get the look that I want, but nothing seems to point to what's going on wrong.

Link to dev site:
http://liberty.ogwebdev.com/template-a.html

topbardropdownmobile

I'm having some issues with my topbar dropdown menus. Can't figure out what the problem is.

1) On a wide screen, the dropdown nested ULs are too narrow. The LI items are being wrapped, when they should all only be one line. Can't see what's limiting their width.

2) On a mobile phone, the dropdown nested ULs height isn't right. They cut off right after the last lLI item. The bottom-padding of that item doesn't effect the overall size of the nested UL like it should. Can't see what's limiting the height.

I've hacked the topbar code quite a bit to get the look that I want, but nothing seems to point to what's going on wrong.

Link to dev site:
http://liberty.ogwebdev.com/template-a.html

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

dave caskey almost 6 years ago

for starters, you can prevent line wrapping using

white-space: nowrap; // or
min-width = *px

on your li

Chad Bradt almost 6 years ago

Thanks, thought I tried that but must have been put it in the wrong place. Also, fixed my other problem by adding padding to the dropdown UL.