o3de.org icon indicating copy to clipboard operation
o3de.org copied to clipboard

[BUG][WEBSITE] Top Navbar has display issues at various window widths

Open willihay opened this issue 2 years ago • 0 comments

Describe the bug

There are a few different display issues in the top navbar at varying window widths. Some have been introduced with the addition of the Engine Developer Guide.

Reproduction steps

Browser window @1508 px wide:

  1. Row of guide buttons appears on new line.
  2. Guide names wrap.
  3. Light blue highlight indicating the selected guide appears lower than it should - inside the banner area if you're looking at the dev branch.

image

Browser window @1707 px wide:

  1. Crowding between "O3DE Learn" and "GET STARTED".

image

Expected behavior / Suggested fixes

In the scenario @1508 px:

  1. Could try reducing the font size at certain widths, to avoid row shifting and guide name wrapping.
  2. If the navbar row must shift, it might look better if "O3DE Learn" were centered.
  3. Fix the light blue guide highlighter positioning in this scenario, and/or prevent guide names from wrapping.

In the scenario @1707 px:

  1. Expected: No crowding. Reduce the font size before this happens, or move the rows to the next line sooner.

Other information

  • OS: Windows 10
  • Browser: Chrome 108

willihay avatar Dec 14 '22 21:12 willihay