Nav item CSS:hover is applied before the nav item is even clickable

[shanrauf]

Nature of issue?

• Found a bug

Details about the bug:

• Web browser and version: On Chrome
• Operating System: Windows 10
• Steps to reproduce this bug: Hover over a nav item where your cursor is causing the :hover effect to be applied, but since your cursor is not hovering over the text, the nav item dropdown is still not clickable

New feature details:

It causes confusion when the CSS hover effect is applied and the user tries clicking a nav item, but they can't click it unless the cursor is above the text.

Solution:

Change line 52 of client\styles\components_nav.scss

from
.nav__item:hover {

to
.nav__item button:hover {

This way, the CSS hover effect (text changing color) will only be applied when the user's cursor is above the button/text and is able to click the dropdown.

[AnkurIngale]

Your proposed solution will keep the button only, leaving a blank space. Rather make that complete area clickable. What do you think?

[AnkurIngale]

Also, I'll like to do it. :-P

[shanrauf]

You're right, making the whole area clickable is a better solution. I've been trying to work on this for a while and am having one small problem.

I created a new class for the nav item button so that this CSS does not affect the .nav__dropdown CSS).

.nav__item-heading {
  width: 100%;
  height: 100%;
}

Nav.jsx:

<li className={navDropdownState.file}>
            <button
              onClick={this.toggleDropdown.bind(this, 'file')}
              onBlur={this.handleBlur}
              onFocus={this.clearHideTimeout}
              className="nav__item-heading"
            >
              <span className="nav__item-header">File</span>
              <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
            </button>

The problem with this is that the padding of the li elements is not clickable. So there are these small spaces (padding) between every nav item that are not clickable (I attached a photo - the highlighted portion is clickable, but the padding is not). Do you have any suggestions?

[siddhant1]

Since we are changing NAV styles, I will try to tackle it with #900 , no need for an extra pr

[siddhant1]

I have completed the implementation , thanks for bringing it though :)