Improve navigation item click areas

RESOLVED WONTFIX

Status

P3
normal
RESOLVED WONTFIX
4 years ago
4 years ago

People

(Reporter: cvan, Unassigned)

Tracking

Points:
---

Details

(URL)

(Reporter)

Description

4 years ago
The current click areas are highlighted in pink for informational purposes.

––

Mobile:
https://www.dropbox.com/s/9zi45kxuzx5e5t3/Screenshot%202014-10-15%2021.23.48.png?dl=0

The click areas could be a bit taller (to fill the height of the nav), a few pixels in between (because the items are `inline-block` and the whitespace is not being stripped correctly/accounted for). The other issue is the border should not cover the entire part of the the clickable area (the anchor).

See the mock:
http://pwalm.github.io/marketplace-style-guides/img/mobileNav.png

––

Desktop:
https://www.dropbox.com/s/wdf5swiq1jhulfq/Screenshot%202014-10-15%2021.23.17.png?dl=0

Even though we're on desktop, the clickable areas here are quite small and hard to hit. We can improve these considerably.
(Reporter)

Comment 1

4 years ago
We should use flexbox to divide the nav items equally so we don't have to have special classes and media queries for when there are 5 versus 4 items when recommendations switch is enabled:

    .navbar { display: flex; }
    .tab-item { flex: 1; }

Updated

4 years ago
Priority: -- → P3
Updating nav design/interaction, tracking in bug 1141687.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.