Top-Level and 2nd-Level Nav Items Not Distinct

[wesleyboar]

Problem

Top-level nav items look the same as 2nd-level nav items that are active or open:

• same font size
• same font weight
• same indentation

Examples

sans 3rd-level	with 3rd-level

Note

The original design would only have this problem for 2nd-level items that do not have 3rd-level items. The problem exists on TACC-Docs also.

Screenshots

original design	problem on TACC

[wesleyboar]

@silviamazzoni, does this accurately describe a problem you reported to me?

[wesleyboar]

Solutions

❌ A. Increase Size of Top-Level Nav

From 14px to whatever the next size font up is.

a	b	c

✅ B. Use Different UI for Active State

Use something else e.g. text color or background color of text item.

1. Highlight the active area, like background color around that nav element?
2. Swap all nav text color to something else (slightly off black, or something along those lines), then keep the title black.

— M.S. (private internal message)