How can I create a menu with the logo in the center, where the logo is larger than the menu itself? I want to add a white line under the logo for aesthetic reasons. However, when I try to add this line using a pseudo-element of the logo (:after), it ends up overriding the logo. I attempted to use z-index, but it didn't solve the issue.
* {background-color: #ededed;}
header::before {
content: "";
display: block;
width: 100%;
height: 15px;
background: linear-gradient(90deg, var(--main) 0, #7b31f4);
position: relative;
}
.header-wrapper {
width: 100%;
height: 100px;
display: flex;
}
.logo-wrapper {
top: 70px;
height: auto;
position: absolute;
}
.logo::before{
content: '';
display: block;
width: 334px;
height: 82px;
position: absolute;
bottom: -40px;
left: -50%;
border-top: 80px solid #fff;
border-left: 37px solid transparent;
border-right: 37px solid transparent;
}
.logo {
max-width: 150px;
}
nav {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
}
ul.left,
ul.right {
display: flex;
} <header>
<div class="header-wrapper">
<nav>
<ul class="left">
<li><a href="#" class="nav-item">Home</a></li>
<li><a href="#" class="nav-item">Players</a></li>
</ul>
<div class="logo-wrapper">
<div class="logo"><img src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="HK Kúple Bojnice" width="100%"></div>
</div>
<ul class="right">
<li><a href="#" class="nav-item">Matches</a></li>
<li><a href="#" class="nav-item">News</a></li>
</ul>
</nav>
</div>
</header>