o3de.org
o3de.org copied to clipboard
[BUG][WEBSITE] Top Navbar has display issues at various window widths
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:
- Row of guide buttons appears on new line.
- Guide names wrap.
- Light blue highlight indicating the selected guide appears lower than it should - inside the banner area if you're looking at the dev branch.
Browser window @1707 px wide:
- Crowding between "O3DE Learn" and "GET STARTED".
Expected behavior / Suggested fixes
In the scenario @1508 px:
- Could try reducing the font size at certain widths, to avoid row shifting and guide name wrapping.
- If the navbar row must shift, it might look better if "O3DE Learn" were centered.
- Fix the light blue guide highlighter positioning in this scenario, and/or prevent guide names from wrapping.
In the scenario @1707 px:
- 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