1083627 - Improve navigation item click areas

Status: RESOLVED WONTFIX

(Marketplace Graveyard :: Consumer Pages, defect, P3)

Description

[Christopher Van Wiemeersch [:cvan]]

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.

Comment 1

[Christopher Van Wiemeersch [:cvan]]

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; }

Comment 2

[David Durst [:ddurst]]

Updating nav design/interaction, tracking in bug 1141687.