Can't click elements below div

Question

I'm making a simple menu with css and jquery. It works great but when I open it I can't click the elements below.

<header> 
<nav>
    <span>
        <img src="img/header.png" alt="logo">
        <i class="fas fa-bars trigger">menu</i>
    </span>
    <span class="menu-container hidden">
        <div class="menu">
            <a href="#">option</a>
            <a href="#">option</a>
            <a href="#">option</a>
            <a href="#">option</a>
        </div>
    </span>
</nav>

<p><a href="#">Option I can't click</a></p>
<p><a href="#">Option I can't click</a></p>
<p><a href="#">Option I can't click</a></p>
<p><a href="#">Option I can't click</a></p>

JQUERY is basically a class toggle to move between the div positions

const menu = document.querySelector('.menu');
const trigger = document.querySelector('.trigger');

function toggle() {
  menu.classList.toggle('menu--open');
}

trigger.addEventListener('click', toggle);

My css. The animation was made with pure CSS. I'm moving the div when click the menu button.

.menu {
  position: relative;
  top: -300px;
  transition: 0.3s all;
}

.menu--open {
  top: 0;
 transition: 0.3s all;
}

nav {
    width: 100%;
    height: 70px;
    position: absolute;
    z-index: 1;
    top: 0;
}

nav span {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav span:nth-child(1) {
    background: white;
    z-index: 1;
    position: relative;
}

 .menu-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fa-bars {
    margin-right: 20px;
    font-size: 20px;
}

.fa-bars:hover {
    cursor: pointer;
}

span .menu {
    background: #95baa8;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

span .menu a {
    padding: 15px;
    text-decoration: none;
    color: white;
}

Those options are hidden under the `
` tag. That element has a z-index of 1 and absolute positioning, so it is essentially sitting on top of the first two links — tshimkus, Mar 10 '19 at 01:40
`edit ` your question: click on the `<>` icon. Then you can paste your full code in a "snippet". It works just link jsfiddle, but runs locally and is embedded in the question. This makes it easier for users and they'll be more inclined to help you. Also if jsfiddle were to become unreachable, the question would be useless to future visitors, degrading the quality of SO. Also It's policy to include an MVE in (most) questions. In the Help center you can read about "How to create a Minimum Viable Example" for future reference. It's fine to *also* have a link to js fiddle if you wish. — SherylHohman, Mar 10 '19 at 04:40

score 2 · Accepted Answer · answered Mar 10 '19 at 01:51

2

The links are actually being "covered" by the header. You can use the CSS property pointer-events: none to get through that. This has been answered here.

answered Mar 10 '19 at 01:51

Marcos Carvalho

81
3

Setting the a elements in `pointer-events:auto` and the menu container in `pointer-events:none` fix it. Thanks. – ahzep Mar 10 '19 at 02:23

score 0 · Answer 2 · answered Mar 10 '19 at 01:44

0

Replate the span items with the div. https://jsfiddle.net/ug28sbkr/

answered Mar 10 '19 at 01:44

Rowf Abd

734
10
21

Can't click elements below div

2 Answers2