IDI-85: Sticky nav bar covers active content

Metadata

Source
IDI-85
Type
Bug
Priority
Critical
Status
Open
Resolution
N/A
Assignee
N/A
Reporter
Anastasia Cheetham
Created
2012-05-25T12:03:38.948-0400
Updated
2015-01-15T10:09:13.786-0500
Versions
N/A
Fixed Versions
N/A
Component
  1. IDI site

Description

When the nav bar is stuck to the top of the window, it covers content that is active, e.g. internal anchors such as people on the People page (click a name, and the person jumps to the top, under the sticky nav), or if you tab backward from the bottom of the page the things you tab to i.e. things which have focus will be under the sticky nav.

Comments

  • Jonathan Hung commented 2013-10-03T10:53:43.234-0400

    Related to this bug, the drop-shadow on the sticky nav bar causes interactive elements to be unclickable using the mouse.

    i.e.
    1. go to the People section.
    2. Scroll down a little so the top sticky nav covers some of the content.
    3. Try clicking a name that appears in the drop shadow in the side bar.
    4. Notice that the link is unclickable.

  • Anastasia Cheetham commented 2015-01-15T10:07:30.083-0500

    I found a CSS solution that will apparently move the anchors out from under the sticky nav bar:
    http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
    I haven't tried it yet, though; and this won't help the shadow issue.

  • Anastasia Cheetham commented 2015-01-15T10:09:13.786-0500

    The shadow is not passing click events through to underlying elements. This can be overcome:
    http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements