How to solve navbar-brand logo issue

June 9, 2022

I added my logo to my navbar, but then something strange happened. Every item in my navbar that contains more than one word, seperated with a space, gets pushed back. See image below:

Current navbar issue

Since I’m not that experienced I tried to search for common fixes for this as I could not see any problems with my code.

I tried display: infline-flex; !important
but without success.

 navbar-brand position: absolute; left: 50%;

seems to work, but I can’t place it to the left side of the navbar this way

this is what my navbar code looks like:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar fixed-top navbar-expand-md bg-light navbar-light py-3 shift" id="mainNav">
  <div class="container">
  
    <a href="#" class="navbar-brand">
        <img src="img/jd_full.png" width="20%" alt="logo" />
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse nav-container" id="navmenu">
      <ul class="navbar-nav ms-auto text-uppercase">
        <li class="nav-item">
          <a href="#overmij" class="nav-link">over mij</a>
        </li>
        <li class="nav-item">
          <a href="#opleiding" class="nav-link">opleiding</a>
        </li>
        <li class="nav-item">
          <a href="#stage" class="nav-link">stage</a>
        </li>
        <li class="nav-item">
          <a href="#realisaties" class="nav-link">realisaties</a>
        </li>
      </ul>
    </div>
    
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>

I checked for padding on the navbar-brand class, but no results.
Anyone knows a fix for this?