Home How to place element in a navbar using flexbox and grid layout | HTML and CSS only

Questions

How to place element in a navbar using flexbox and grid layout | HTML and CSS only

byMR

August 16, 2022

I’m having an issue to get the result I want.

I can only use flexbox and grid layout to do this.

I’m currently trying to place a search bar inside of the navigation bar.

I would like it verticaly centered and placed to the right of the navbar.

The items

and must remain where they are on the left.

Can you please help me?

/* Reset */

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

/* General styles */

html {
  font-size: 100%;
  line-height: 1.5;
}

body {
  max-width: 1850px;
  font-family: "BenchNine", sans-serif;
}

/* Header */

.top-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
}

.slogan {
  text-align: right;
  font-family: "Chela One", cursive;
  font-size: 4em;
  color: #527bea;
}

/* Navbar */

nav {
  background-color: #ae2123;
}

ul {
  display: flex;
  justify-content: left;
}

a {
  display: block;
  padding: 15px 25px;
  text-align: center;
  color: #fff;
}

a:hover {
  color: #999;
}

input {
  padding: 5px 20px;
  border-radius: 20px;
}

<header>
    <div class="top-container">
      <div class="logo-box">
        <img class="logo" src="/img/logo.png" alt="logo" />
      </div>
      <div class="slogan-box">
        <h1 class="slogan">La passion des films</h1>
      </div>
    </div>
    <nav>
      <ul>
        <li>
          <a href="#">Programmes</a>
        </li>
        <li>
          <a href="#">Actualités</a>
        </li>
        <li>
          <a href="#">Jeune Public</a>
        </li>
        <li>
          <a href="#">Tarifs</a>
        </li>
        <li>
          <a href="#">Accés</a>
        </li>
        <div class="form-container">
          <form class="form" action="#">
            <input type="text" placeholder="Rechercher" />
          </form>
        </div>
      </ul>
    </nav>
  </header>

>Solution :

Your HTML is invalid. You cannot have a div as a direct child to a ul. Make it just another li instead.

Then you can add align-items: center; to the ul which will center it vertically. Then add margin-left: auto; to place it on the right.

/* Reset */

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}


/* General styles */

html {
  font-size: 100%;
  line-height: 1.5;
}

body {
  max-width: 1850px;
  font-family: "BenchNine", sans-serif;
}


/* Header */

.top-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
}

.slogan {
  text-align: right;
  font-family: "Chela One", cursive;
  font-size: 4em;
  color: #527bea;
}


/* Navbar */

nav {
  background-color: #ae2123;
}

ul {
  display: flex;
  justify-content: left;
  align-items: center;
}

.form-container {
  margin-left: auto;
  margin-right: 1em;
}

a {
  display: block;
  padding: 15px 25px;
  text-align: center;
  color: #fff;
}

a:hover {
  color: #999;
}

input {
  padding: 5px 20px;
  border-radius: 20px;
}

<header>
  <div class="top-container">
    <div class="logo-box">
      <img class="logo" src="/img/logo.png" alt="logo" />
    </div>
    <div class="slogan-box">
      <h1 class="slogan">La passion des films</h1>
    </div>
  </div>
  <nav>
    <ul>
      <li>
        <a href="#">Programmes</a>
      </li>
      <li>
        <a href="#">Actualités</a>
      </li>
      <li>
        <a href="#">Jeune Public</a>
      </li>
      <li>
        <a href="#">Tarifs</a>
      </li>
      <li>
        <a href="#">Accés</a>
      </li>
      <li class="form-container">
        <form class="form" action="#">
          <input type="text" placeholder="Rechercher" />
        </form>
      </li>
    </ul>
  </nav>
</header>