You may achieve the desired layout using CSS positioning alongside negative margins as illustrated.
HTML
<header>
<div class="logo">
<img src="logo.png" alt="Logo">
</div>
<nav>
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</nav>
</header>
CSS
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
position: relative;
z-index: 1;
height: 80px; /* adjust as needed */
}
.logo {
position: absolute;
left: 0;
top: 0;
margin-top: -20px; /* adjust as needed */
z-index: 2;
}
.logo img {
display: block;
height: 100px; /* adjust as needed */
}
nav {
z-index: 1;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
color: #333333;
}
The logo is absolutely positioned at the top left corner of the header, utilizing a negative margin to overlap with other content in the header. The remaining header elements are relatively positioned with a higher z-index than the logo to ensure they appear above it.
I trust this explanation proves helpful.