Menu icon Foundation
Navigation sub-menus off-screen

Hello,

I am making a website using top-bar as the navigation. When you shrink the screen size down too far the sub-menu items begin to appear off screen, making the user unable to select options.

Here is the URL. http://beta2.rentalsatthebeach.com/

Shrink the screen size down until the gray box at the top says 503x70 (or lower). If you shrink the screen size too low you will be in the mobile navigation. Now, hover your mouse over Option 1 (vacation rentals), then Sub-option 1 (Search vacation rentals), then sub-sub-option 3 (search by amenity).

You will see the 3rd menu is off-screen.

Is there a way for Zurb to auto-detect the edge of the screen and force all sub-menu items to always stay inside the confines of the screen? Essentially making it a smart menu.

navigationnavtopbarsub-menu

Hello,

I am making a website using top-bar as the navigation. When you shrink the screen size down too far the sub-menu items begin to appear off screen, making the user unable to select options.

Here is the URL. http://beta2.rentalsatthebeach.com/

Shrink the screen size down until the gray box at the top says 503x70 (or lower). If you shrink the screen size too low you will be in the mobile navigation. Now, hover your mouse over Option 1 (vacation rentals), then Sub-option 1 (Search vacation rentals), then sub-sub-option 3 (search by amenity).

You will see the 3rd menu is off-screen.

Is there a way for Zurb to auto-detect the edge of the screen and force all sub-menu items to always stay inside the confines of the screen? Essentially making it a smart menu.

Karl Ward almost 6 years ago

Did you fix this? I can't see any menu items being cut off http://d.pr/i/2zEW ... Items that have too much text are wrapped onto new line, which would be expected behavior.