How can i make anchor tags clickable when using the function z index

user_14953740 0
Viewed 139

the nav is set absolute to the headerContainer. And in motion it works fine. It needs to drop from behind the headerContainer over the main content of the page. This way the content dissapears and the menu is on top. I have done so by setting my main class to relative and a negative z-index: 2; because the nav is set to negativ -1;

Right now everything works and it looks good. The only problem is that the anchor tags inside my nav are not clickable anymore.

I have been searching for the answer but could not find anything related. Is there anyone who can tell me why this occurs? I have yet to find a good solution for this.

What i want to happen seems so simple.. it needs to drop down from behind or at least create the idea its coming from behind the header..

I have tried setting the height of the nav to 0 and on click set it to 100%. That wil drop the menu as if it comes from behind. but gave me other problems like the anchors would come in later or sooner then the actual nav background.

Here is a snippet with the full example.

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}
* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    z-index: -1;
    /* display: none; */
    padding: 15px;
    width: calc(100% - 30px);
    position: absolute;
    top: -100px;
    left: -1px;
    background: #ffffff;
    transition: top 2s;
}
header nav.show {
    top: 100%;
}
header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}
/* --- MAIN --- */
main {
    position: relative;
    z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="#">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->

z-index css html javascript
5 Answers

The easiest solution is to add position: relative;z-index: 0; to the body element. Your negative z-index elements are going behind the body element which make them unclickable. By adding a z-index to the body you force the creation of a stacking context and you won't have this issue.

Full explanation here: Why can't an element with a z-index value cover its child?

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}
* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    position: relative;
    z-index: 0;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    z-index: -1;
    /* display: none; */
    padding: 15px;
    width: calc(100% - 30px);
    position: absolute;
    top: -100px;
    left: -1px;
    background: #ffffff;
    transition: top 2s;
}
header nav.show {
    top: 100%;
}
header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}
/* --- MAIN --- */
main {
    position: relative;
    z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="#">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->

You may argue that the elements aren't behind the body since we can clearly see them on the top of the background but this is due to background propagation that move the background from the body to html element.

Add a background to html in your initial code to disable background propagation and you will notice how the elements are rendred behind the body:

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}
* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
html {
  background:red;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    z-index: -1;
    /* display: none; */
    padding: 15px;
    width: calc(100% - 30px);
    position: absolute;
    top: -100px;
    left: -1px;
    background: #ffffff;
    transition: top 2s;
}
header nav.show {
    top: 100%;
}
header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}
/* --- MAIN --- */
main {
    position: relative;
    z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="#">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->

user_86203330

The z-index of any children are directly inherited from their parent - so if you have a child with a z-index of 100 inside of a parent with a z-index of -1, the child is 100 relative to the -1.

You should be able to build the header and menu without relying on z-index. For instance, I've taken the indexes out of your code and put this together (just add the animation): https://jsfiddle.net/efk6s1oj/

* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    /* display: none; */
    padding: 15px;
    background: #ffffff;
    transition: top 2s;
}

header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}

/* --- MAIN --- */

nav {
  position:absolute;
  opacity:0;
}

nav.show {
  top:100px;
  opacity:1;
}
user_147004380

For this type of effects and due to the problem you are pointing out, I use a different technique to simulate the drop effect.

Just position the <nav> where you want and work with the max-height from 0 to a large enough value, and remove all negative z-index.

Find the solution in the snippet bellow

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}
* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    z-index: 9;
    /* display: none; */
    overflow: hidden;
    padding: 0 15px;
    width: calc(100% - 30px);
    position: absolute;
    /*top: -100px;
    left: -1px;*/
    top: 100%;
    left: 0;
    background: #ffffff;
    /*transition: top 2s;*/
    max-height: 0px;
    transition: max-height 0.5s ease, padding 0.5s ease;
}
header nav.show {
    /*top: 100%;*/
    max-height: 500px;
    padding: 15px;
    transition: max-height 0.5s ease, padding 0.5s ease;
}
header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}
/* --- MAIN --- */
main {
    position: relative;
    /*z-index: -2;*/
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="#">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->

user_60336140

Avoid doing this with z-index especially negatives. Your links don't work because they are behind transparent content by z-index.

Instead change the order the elements are in the page, which keeps it much simpler.

I've stripped out your fonts/styles just to keep this simple, and switched from animating top to animating transform:

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
  menu.classList.toggle("show");
  icon.classList.toggle("fa-times");
}
* {
  margin: 0;
  padding: 0;
}

body {
  background: #F5F5F5;
  color: #1F1F1F;
  font-size: 20px;
}

a {
  text-decoration: none;
  color: #1F1F1F;
}


/* --- HEADER --- */

header {
  width: 100%;
  height: auto;
  background: #FFF;
  position: absolute;
  top: 0;
  left: 0;
}

.headerContainer,
.container {
  width: 90%;
  max-width: 1140px;
  margin: auto;
  padding: 15px;
}

.headerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}


/* --- Logo --- */

.headerBrand {
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.headerBrand img {
  padding: 0 15px 0 0;
}


/* --- NAV --- */

nav {
  padding: 15px;
  width: calc(100% - 30px);
  position: absolute;
  top: 66px;
  left: 0;
  background: #ffffff;
  transform: translateY(-200px);
  transition: transform 1s ease-in-out;
}

nav.show {
  transform: translateY(0);
}

nav ul.mainMenu {
  list-style: none;
}

header nav ul li a:hover {
  color: red;
}

.menuBtn {
  width: 35px;
  height: 35px;
  text-align: center;
  background: red;
  font-size: 25px;
  border-radius: 5px;
  cursor: pointer;
  color: #FFF;
}


/* --- MAIN --- */

main {
  position: relative;
}
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>

<!-- First content, everything else appears on top -->
<main class="container">
  <section>
    <h1>This is a header</h1>
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
    <p>This is some text</p>
  </section>
</main>

<!-- Then nav, on top of content, under header -->
<nav>
  <ul class="mainMenu">
    <li><a href="#">First link</a></li>
    <li><a href="#">Second link</a></li>
    <li><a href="#">Thirth link</a></li>
    <li><a href="#">Fourth link</a></li>
  </ul>
</nav>

<!-- Finally header, on top of everything -->
<header>
  <div class="headerContainer">
    <div class="headerBrand">Whatever</div>
    <div class="menuBtn"><i class="fas fa-bars"></i></div>
  </div>
</header>

Keith_9050

Main changes include changing the nav element to a div element with class as headerNav & making corresponding changes.

also z-index works just dont go in negative push header up to +ve numbers not pushing nav behind in -ve number.

This is the closest best solution for your problem.

let Btn = document.querySelector(".menuBtn");
    let menu = document.querySelector(".headerNav");
    let icon = document.querySelector(".fa-bars");
    Btn.onclick = () => {
        menu.classList.toggle("show");
        icon.classList.toggle("fa-times");
    }
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    align-content: center;
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
header{
    width: 100%;
    height: 7rem;
}

.headerContainer, .headerNav, .container{
    display: flex;
    width: 90%;
    max-width: 1140px;
    background: white;
    margin: auto;
    position: relative;
    justify-content: space-between;
    align-items: center;
    padding:1rem;
}
.headerContainer{
    height: 7rem;
    z-index: 3;
}
.container{
    padding:2rem;
}
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
.menuBtn {
    width: 3rem;
    height: 3rem;
    text-align: center;
    background: red;
    font-size: 2rem;
    line-height: 3rem;
    border-radius: .5rem;
    cursor: pointer;
    color: #FFF;
}
.headerNav{
    position: absolute;
    top: -10rem;
    transition: top .5s;
    left:0;
    right:0;
    margin-left:auto;
    margin-right: auto;
    z-index: 2;
    padding: 1rem;
    
}
.headerNav.show{
    top: 7rem;
}

.mainMenu{
    list-style: none;
}
.mainMenu li a:hover{
    color: red;
}
<body>
<!-- header-->
<header>
    <div class="headerContainer">
        <!-- Logo or Brandname -->
        <div class="headerBrand">
            <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
        </div>
        <!-- END Logo -->
        <div class="menuBtn"><i class="fas fa-bars"></i></div>
        <!-- END Nav -->
    </div>
    <!-- Nav -->
    <div class="headerNav">
        <ul class="mainMenu">
            <li><a href="#">First link</a></li>
            <li><a href="#">Second link</a></li>
            <li><a href="#">Thirth link</a></li>
            <li><a href="#">Fourth link</a></li>
        </ul>
    </div>
</header>

<!-- END header-->
<!-- Main -->
<main class="container">
    <section>
        <h1>This is a header</h1>
        <p>This is some text</p>
        <p>This is some text</p>
        <p>This is some text</p>
        <p>This is some text</p>
        <p>This is some text</p>
        <p>This is some text</p>
    </section>
</main>
<!-- END Main-->
</body>

user_150543880
Related