Daniel Saavedra Daniel Saavedra - 4 months ago 14
HTML Question

Hamburger menu (Between lines are unclickable)

I have encountered a problem where I tried to click between black lines and it doesn't triggered anything, but triggers when clicked on the black lines. I added div so that I can add cursor pointer around the area. I am aware that it must be something with the for=nav-trigger located in the html, however "for" doesn't work with div. Is there a workaround?

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


Here is the link to jsfiddle: https://jsfiddle.net/dxs6040/51wdfypj/14/

Answer

Use the html like this:

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

and add this to css:

label {
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

jsfiddle: https://jsfiddle.net/e9qafkbr/

Comments