How to make an image appear in the center of the header?

Question

First of all, my code is based on 3 files, an HTML, a CSS and a JS. It should be noted that I am using the Bootstrap 5.1.3 framework to create the HTML.

My problem is, first of all, the logo of the clothing brand I am using as a case study is not centered, I have tried everything to make it centered in the title, however, I cannot achieve it. I also added that I have a drop down search engine, that is, I press the search icon and it shows a box on the right for text input, well, when that happens and said box appears , the logo also appears. To not be centered, it scrolls more to the left (because I'm searching on the right), and I don't know what the hell is going on.

I know this is most likely due to the container, but I've also tried shrinking the logo container and centering it, but to no avail, it stays exactly the same. I hope you can help me. I'm trying to work on this framework, but this little detail isn't getting me going.

// selecciona el icono de búsqueda y el campo de búsqueda
const searchIcon = document.querySelector('.fa-search-icon');
const searchField = document.querySelector('.search-container input[type="text"]');

// agrega un event listener al icono de búsqueda
searchIcon.addEventListener('click', function() {
  // muestra u oculta el campo de búsqueda
  searchField.style.display = searchField.style.display === 'none' ? 'block' : 'none';
});

.navbar {
  height: 72px;
  background-color: #fff;
  margin-bottom: 0;
  position: relative;
  justify-content: center;
}

.nav-link {
  display: flex;
  justify-content: center;
}


/* Estilos para los enlaces del header */

.navbar-nav li a {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  text-align: center;
}


/* Estilos para el logo */

.navbar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}


/* Estilos para la imagen del logo */

.navbar-brand img {
  height: 50px;
  width: auto;
}

.navbar-center {
  max-width: 300px;
  /* ajustar el ancho máximo según tus necesidades */
  margin: 0 auto;
  /* centrar horizontalmente */
}


/* Estilos para el botón de hamburguesa en dispositivos móviles */

.navbar-toggler {
  border-color: #333;
}

.navbar-toggler-icon {
  background-color: #333;
}


/* Estilos para los enlaces Contact Us y Cart en pantallas pequeñas */

@media (max-width: 767px) {
  /* Estilos para la barra de búsqueda en pantallas pequeñas */
  .navbar-form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 10px;
    border: none;
  }
  .navbar-form .form-control {
    border-radius: 0;
    background-color: #f2f2f2;
    color: #333;
    border: none;
    width: 100%;
    max-width: 300px;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    margin-right: 0;
  }
  .navbar-form .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px;
    margin-left: 10px;
    border-radius: 0;
  }
  .navbar-form .input-group-text:hover,
  .navbar-form .input-group-text:focus {
    background-color: #000;
    color: #fff;
  }
}


/* Animación para desplazar el ícono a la izquierda */

.search-container input[type="text"] {
  display: none;
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item"><a class="nav-link" href="#">Men</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Women</a></li>
        </ul>

        <a class="navbar-brand" href="#">
          <img src="logo.png" alt="Logo" style="max-width: 146px;">
        </a>

        <ul class="navbar-nav ms-auto">
          <li class="nav-item search-container">
            <input type="text" placeholder="Buscar...">
            <a class="nav-link" href="#"><i class="fa fa-search fa-search-icon"></i></a></li>
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-user"></i></a></li>
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-star"></i></a></li>
          <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-envelope-open"></i></a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

1. I tried centering the logo normally
2. I tried reducing the container of the logo
3. I tried redoing the code from 0

I have tried many times to change the CSS to center the logo, or to reduce the container of the logo, but still to no avail, the logo always stays in the same part.

When I did this, yes I also managed to center the logo, only to find that the include overlapped the title so no part of the title could be selected.

Answer 1

First, you should try removing width: 100%; from .navbar-brand.

You should also add the following code:

.navbar-nav {
  flex: 1;
}

Center all navigation links, but be careful as all elements will take up the remaining space between them and this code:

.navbar-collapse {
  flex-grow: 1;
}

Prevent the logo from moving when search input appears.