2

I was playing around with hamburger menu using CSS only. One thing that I encounter is the cursor pointer. When I hover the cursor over the hamburger button, it wouldn't change to pointer if it was between white lines. It only works when it hover on white lines. I tried figuring it out how to solve this issue but no luck so far. Any help would be appreciated!

.nav-trigger {
    cursor: pointer;
    clip: rect(0, 0, 0, 0);
    position: absolute;
    z-index: 2;
}

Here is the link to my issue: https://jsfiddle.net/dxs6040/51wdfypj/2/

Daniel Saavedra
  • 47
  • 6
  • One solution would be to wrap your `input` and `label` in a DIV that itself had the `cursor:pointer` style applied. Seems like something you'd have wrapped for easier positioning anyway. – Robert Aug 01 '16 at 19:25
  • I tried that and now it seems the pointer work when hovering all over the hamburger menu except for clicking. Any idea why? – Daniel Saavedra Aug 01 '16 at 19:32

2 Answers2

1

Wrap your label with a div and set styles like below;

position: fixed;
top: 5px;
right: 15px;
height: 25px;
width: 35px;
cursor: pointer;
Ismail Gül
  • 119
  • 12
0

Just put your <input> and <label> tags inside a <div> that has cursor:pointer; set on your CSS.

<div id="menu">
  <input type="checkbox" id="nav-trigger" class="nav-trigger"/>
  <label id="menuButton" for="nav-trigger"></label>
</div>

In your CSS file, add:

#menu {
    cursor: pointer;
    right: 15px;
    height: 25px;
    width: 35px;
    position: fixed;
}

If you want to make further changes, simply adjust the #menu's properties at will.

Working result: https://jsfiddle.net/emur3bgf/

SexualPotatoes
  • 78
  • 10
  • The pointer now works, however when I click it between the white lines, it doesn't trigger at all. Any idea why this may happen? – Daniel Saavedra Aug 01 '16 at 19:42
  • This is because state changes are linked to nav-trigger, not #menu. You would have to update that in the CSS (move the actions from nav-trigger to the menu div we just created) – SexualPotatoes Aug 01 '16 at 19:44