I'm trying to make nav-menu to overlap every section. But I'm trying to use z-index but it seems not to work in this situation.
I'm trying many solutions like add position for all element but still not working. Here is my HTML code
<div class="wrap-content">
<header class="header">
<div class="header__center">
<nav class="header__center--nav">
<ul>
<li class="main-menu"><a class="main-menu__a" href=""><span class="flaticon-right-arrow main-menu__a"></span>
Elements</a>
<div class="wrapper-menu">
<div class="row">
<div class="col-xl-3 col-lg-3">
<h3>Classic</h3>
<div class="menu-1">
<ul>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>Contact us</a></li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3">
<h3>Pretentation</h3>
<div class="menu-1">
<ul>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>Contact us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>Contact</a></li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3">
<h3>Infographic</h3>
<div class="menu-1">
<ul>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3">
<h3>Typography</h3>
<div class="menu-1">
<ul>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>Contact us</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</header>
<section class="section-1">
<div class="container">
<div class="row">
<div class="col-6">
<div class="col-6__inner">
<h1>Incredible app
<span class="col__inner--trade">features</span></h1>
<span></span>
</div>
<div class="col-6__title">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo sdam dolorem debitis quod.</h3>
</div>
</div>
<div class="col-6">
<div class="col-6__phone">
<div class="img-phone-1">
<img src="./img/phone-img/phone-2.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Here is the result after I set the z-index of nav-menu is 9999. enter image description here
Z-index only works on positioned elements -
so depending on what you are trying to do achieve, may be you need to make the Nav fixed to the top??
something like this for example:
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}