I can't center the navbar items in bootstrap 5

HTML-CSS
1

My navbar menu is not getting centered, it’s more close to the right side. I think that’s because of the logo, but how do I center it , I tried a couple of solutions they don’t work.

This is how it looks at the moment:

Capture.PNG
Capture.PNG1920×882 105 KB

This is the code:

<nav class="navbar navbar-expand-lg navbar-color justify-content-center">
      <div class="container">
        <a href="/" class="navbar-brand d-flex me-auto"  loading="lazy">
          <img src="https://www.pixground.com/wp-content/themes/Pixground/images/logo.png"/>
        </a>
        <button class="navbar-toggler" type="button"data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="collapsingNavbar3">
          <ul class="navbar-nav mx-auto w-100 justify-content-center">
            <li class="nav-item hoverEffect active">
              <a class="nav-link text-white" href="#">Empresa</a>
            </li>
            <li class="nav-item hoverEffect">
              <a class="nav-link text-white " href="#">Advisory Board</a>
            </li>
            <li class="nav-item hoverEffect">
              <a class="nav-link text-white" href="#">Diferenciais</a>
            </li>
            <li class="nav-item hoverEffect">
              <a class="nav-link text-white" href="#">Mídia</a>
            </li>
            <li class="nav-item hoverEffect">
              <a class="nav-link text-white" href="#">Download</a>
            </li>
            <li class="nav-item hoverEffect">
              <a class="nav-link text-white" href="#">Contato</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
2

Which element contains your navbar items? For example if it is an unordered list, you can try to add margin to your unordered list.

3

I have added a div same size as the logo to the left

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.