I need your advice to achieve the following visual effect of the next navigation bar.
What I want to achieve is that the links in the navigation bar have a lower height than the logo so that the same logo is highlighted, just like the logo of the previous image.
This is what I have achieved so far, I hope I do not go astray.
Here is an example in line with what you intend to do.
A span element is responsible for reserving space for the logo while the image is set with absolute positioning to avoid resizing the container div:
.content{
width: 100%;
height: 400px;
background-color: #666666;
padding-top: 120px;
}
.navbar{
text-align: center;
background-color: rgba(255,255,255,0.1);
height: 30px;
padding-top: 10px;
}
.navbar span{
color: white;
padding: 0 10px;
top: 0;
}
.navbar .logo{
position: relative;
padding: 0 60px;
}
.navbar .logo img{
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 10px;
}<div class="content">
<div class="navbar">
<span>Inicio</span>
<span>Blog</span>
<span class="logo"><img></span>
<span>Contacto</span>
<span>Redes Sociales</span>
</div>
</div>