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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav  id="mainNav">
  <div >
  
    <a href="#" >
        <img src="img/jd_full.png" width="20%" alt="logo" />
    </a>

    <button  type="button" data-toggle="collapse" data-target="#navmenu">
        <span ></span>
    </button>

    <div  id="navmenu">
      <ul >
        <li >
          <a href="#overmij" >over mij</a>
        </li>
        <li >
          <a href="#opleiding" >opleiding</a>
        </li>
        <li >
          <a href="#stage" >stage</a>
        </li>
        <li >
          <a href="#realisaties" >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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

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

CodePudding user response：

your problem is caused by the width you set, for logos use a fixed size equivalent to the proportion of your navigation bar.

change this <img src="img/jd_full.png" width="20%" alt="logo"> for this other <img src="img/jd_full.png" width="120px" alt="logo">