adjust navbar height so links can fit in middle-CodePudding

I create a navbar resemble rotten tomato. The navbar has 2 row, first row has links and second row has logo (width and height is fixed), search bar, links the first row is ok but the second row has logo so the link also has the same height as the logo . how to adjust second row so it look like original image (link in row2 can spread in the same line and navbar height is not affected by image height)

@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,") 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 >
    <a href="">What's the Tomatometer&reg;?</a>
    <a href="">Critics</a>
    <a href="">SIGN UP</a>
    <a href="">LOG IN</a>
  </div>
  <div >
    <img src="/logo.png" alt="" />
    <input type="search" id="" name="" placeholder="Search movies, TV, actors, more.." />
    <div >
      <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>

CodePudding user response：

This would help

.row2 {
 display: flex;
 align-items: center;
 margin-top: 5px;
 width: 100%;
 justify-content: space-between;
}

CodePudding user response：

remove float: right; from .row1 and add display: flex; justify-content: flex-end; to it,

then add display: flex; flex-direction: column; to nav

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  flex-direction: column;
  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 {
  display: flex;
  justify-content: flex-end;
  font-family: "Franklin Gothic", -apple-system, BlinkMacSystemFont, "PT Sans", Arial, Sans-Serif;
}

nav .row1 a {
  margin-left: 20px;
  font-size: 14px;
}

nav .row2 {
  display: flex;
  align-items: flex-end;
}

nav .row2 img {
  height: 51px;
  width: 165px;
}

nav .row2 input {
  font-size: 16px;
  background: transparent url("data:image/svg xml,") no-repeat 13px center;
  padding: 9px 4px 9px 40px;
  border-radius: 25px;
  border: 1px solid white;
  margin-left: 30px;
  color: white;
  width: 35%;
  max-width: 400px;
}

nav .row2 input::placeholder {
  color: white;
}

nav .row2 .links {
  margin-left: 30px;
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: space-between;
  font-family: Neusa, Impact, Helvetica Neue, Arial, Sans-Serif;
}

nav .row2 .links a {
  text-transform: uppercase;
  font-size: 16px;
  white-space: nowrap;
  margin-left: 16px;
}

<nav>
  <div >
    <a href="#">What's the Tomatometer&reg;?</a>
    <a href="#">Critics</a>
    <a href="#">SIGN UP</a>
    <a href="#">LOG IN</a>
  </div>
  <div >
    <img src="https://www.rottentomatoes.com/assets/pizza-pie/images/rtlogo.9b892cff3fd.png" alt="" />
    <input type="search" id="" name="" placeholder="Search movies, TV, actors, more.." />
    <div >
      <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>