I designed a navigation bar that resembles Rotten Tomato. The navbar consists of two rows: the first row contains links, and the second row includes a logo (with fixed width and height), a search bar, and additional links. While the layout of the first row is fine, I'm facing an issue with the second row where the link has the same height as the logo https://i.sstatic.net/iWVbu.png. How can I adjust the second row so that it looks like the original image (where the links in row 2 can spread in the same line and the navbar's height is not affected by the image height)? https://i.sstatic.net/yq7l7.png
@font-face {
font-family: franklin;
src: url(FranklinGothic.ttf);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: franklin;
}
nav {
margin-top: 50px;
width: 90vw;
margin-left: auto;
margin-right: auto;
background: #1f1f1f;
padding: 20px 30px;
}
nav a {
display: inline-block;
text-decoration: none;
color: white;
}
nav .row1 {
float: right;
}
nav .row1 a {
margin-left: 20px;
font-size: 14px;
}
nav .row2 {
display: flex;
align-items: flex-end;
margin-top: 5px;
}
nav .row2 img {
border: 1px solid red;
height: 51px;
width: 165px;
}
nav .row2 input {
width: 400px;
font-size: 16px;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
padding: 9px 4px 9px 40px;
border-radius: 25px;
border: 1px solid white;
margin-left: 30px;
}
nav .row2 input::placeholder {
color: white;
}
nav .row2 .links {
margin-left: 30px;
display: flex;
align-items: center;
}
nav .row2 .links a {
text-transform: uppercase;
font-size: 16px;
margin-left: 10px;
border: 1px solid red;
}
/*# sourceMappingURL=style.css.map */<nav>
<div class="row1">
<a href="">What's the Tomatometer®?</a>
<a href="">Critics</a>
<a href="">SIGN UP</a>
<a href="">LOG IN</a>
</div>
<div class="row2">
<img src="/logo.png" alt="" />
<input type="search" id="" name="" placeholder="Search movies, TV, actors, more.." />
<div class="links">
<a href="">movies</a>
<a href="">tv shows</a>
<a href="">rt podcast</a>
<a href="">news</a>
<a href="">showtimes</a>
</div>
</div>
</nav>