Daniel Saavedra Daniel Saavedra - 1 year ago 89
CSS Question

Hamburger menu css cursor

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/

Answer Source

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>

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/