Прикрепляю гифку ниже. С z-index уже пробовал играться, не работает. Почему-то эта белая плашка настойчиво выезжает поверх всех остальных элементов. Как можно решить эту проблему?
<div class="top-panel">
<div class="left-side">
<h1><a href="#" class="icon-iconmonstr-infinity-1"><span>Creative</span> Box</a></h1>
</div>
<div class="right-side">
<ul class="main-nav">
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Calculator</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
</ul>
<div class="phone">0947891495</div>
<button class="main-btn">Get Started</button>
</div>
<div class="all-menu-items">
<nav class="links-menu">
<a href="" class="nav-point">About</a>
<a href="" class="nav-point">Services</a>
<a href="" class="nav-point">Calculator</a>
<a href="" class="nav-point">News</a>
<a href="" class="nav-point">Contact</a>
</nav>
<div class="hamburger-menu">
<a href="#" class="menu-btn">
<span></span>
</a>
</div>
</div>
</div>
.main-header .all-menu-items {
display: none;
}
.main-header .top-panel {
z-index: 30;
position: fixed;
display: flex;
justify-content: space-between;
height: 80px;
width: 100vw;
background-color: #fff;
box-shadow: inset 0 -2px 0 0 #DCE9F5;
}
.main-header .left-side {
padding-left: 99px;
}
.main-header .left-side, ul.main-nav, .right-side .phone {
display: flex;
align-items: center;
}
.left-side h1 a {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 1.8rem;
color: #212121;
}
.left-side h1 a span {
font-size: 1.8rem;
font-weight: 300;
}
.main-header .right-side {
display: flex;
}
ul.main-nav {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
ul.main-nav a, .right-side .phone {
font-weight: 700;
font-size: 1.6rem;
margin-right: 40px;
}
.top-panel ul.main-nav a {
text-transform: uppercase;
color: #455F87;
}
.top-panel ul.main-nav a:hover {
color: #37A1F6;
border-bottom: 2px solid #37A1F6;
padding-bottom: 28px;
}
.right-side .phone {
align-items: center;
color: #212121;
border-left: 2px solid #DCE9F5;
padding-left: 40px;
}
.right-side .main-btn {
padding: 0 40px 0 40px;
}
.main-header .top-panel {
height: 70px;
}
.main-header .top-panel .right-side {
display: none;
}
.main-header .all-menu-items {
display: flex;
}
.main-header .all-menu-items .hamburger-menu {
display: flex;
align-items: center;
}
.main-header .all-menu-items .menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #FB7DA4;
background-image: linear-gradient(to right, #FBA9A2, #FB7DA4);
border-radius: 50%;
margin-right: 30px;
}
.main-header .all-menu-items .hamburger-menu .menu-btn span,
.main-header .all-menu-items .hamburger-menu .menu-btn span::before,
.main-header .all-menu-items .hamburger-menu .menu-btn span::after {
position: absolute;
display: block;
background-color: #fff;
width: 16px;
height: 2px;
}
.main-header .all-menu-items .hamburger-menu .menu-btn span::before,
.main-header .all-menu-items .hamburger-menu .menu-btn span::after {
content: '';
transition: .3s;
}
.main-header .all-menu-items .hamburger-menu .menu-btn span::before {
transform: translateY(-5px);
}
.main-header .all-menu-items .hamburger-menu .menu-btn span::after {
transform: translateY(5px);
}
.main-header .all-menu-items .hamburger-menu .menu-btn-active span {
background: none;
}
.main-header .all-menu-items .hamburger-menu .menu-btn-active span::before {
transform: rotate(45deg);
}
.main-header .all-menu-items .hamburger-menu .menu-btn-active span::after {
transform: rotate(-45deg);
}
.main-header .all-menu-items .links-menu {
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: fixed;
left: 0;
top: -100%;
transition: 2s;
width: 100vw;
height: 75vh;
background-color: #fff;
box-shadow: inset 0 -2px 0 0 #DCE9F5;
overflow-y: auto;
}
.main-header .all-menu-items .active-links-menu {
z-index: 20;
top: 70px;
}
.main-header .all-menu-items .links-menu .nav-point {
padding: 21px;
font-weight: 700;
font-size: 1.6rem;
text-transform: uppercase;
color: #455F87;
}
.main-header .all-menu-items .links-menu .nav-point:hover {
color: #FB7DA4;
}
Сложный
