search

NDSU-Information-Technology / ndsu-web-template

NDSU Web Template
Creative Commons Attribution 4.0 International
1 stars 0 forks source link

Dropdown navigation overflows page container #13

Closed jillande closed 5 years ago

jillande commented 6 years ago

If the sub-navigation items are sufficiently long (width-wise), especially if on the right side of the navigation bar, it overflows the width of the page container. If the browser window is "too small" this means the navigation text is not completely visible. If the browser window is oversized, it might not be an apparent problem to the author or visitor.

Rather than displaying exactly below the horizontal navigation item, it may be necessary to shift the item to the left in cases where it would overflow the page container on the right. Perhaps a Javascript check that if it exceeds the area of the container on the right, then unset "left:0;" and instead set "right:0;". And hopefully no one has a sub-item title that is so long it doesn't fit in the full width of the container.

paramartad commented 5 years ago
  1. Go to https://ndsu-information-technology.github.io/ndsu-web-template/sample-pages/department/
  2. Resize window so it barely fits the navigation bar
  3. Expand the "About Us" navigation
  4. The drop down has a right align instead of left