title: Central Logo navbar with links on either side
body: <p>Im trying to get my navbar to look like this: <a href="https://i.stack.imgur.com/4LYcI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4LYcI.png" alt="enter image description here" /></a></p>
  <p>But it looks like this:
  <a href="https://i.stack.imgur.com/1PDHR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1PDHR.png" alt="enter image description here" /></a></p>
  <p>I am using bootstrap 5. I basically want the navbar links on either side of the logo. Can I add some custom class in the html and then just translate them i tried this but couldnt get it to work. Here is the HTML and CSS for the navbar.</p>
  <pre><code>  &lt;nav class=&quot;navbar navbar-expand-md navbar-dark bg-custom fixed-top&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
  
        &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarCollapse&quot; aria-controls=&quot;navbarCollapse&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
          &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarCollapse&quot;&gt;
          &lt;ul class=&quot;navbar-nav mb-02 mb-md-0&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;HOME&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;GALLERY&lt;/a&gt;
            &lt;/li&gt;
            &lt;!-- &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;/images/logos/circle-cropped.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt; --&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link navbar-brand&quot; href=&quot;#&quot;&gt;&lt;img src=&quot;/images/logos/circle-cropped.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;MENUS&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class =&quot;nav-item nav-item-left&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;ABOUT&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  <pre><code>/* NAVBAR */
  .navbar {
    border-bottom: solid #5f4b22;
  }
  
  .bg-custom{
    background-color: #141619;
  }
  
  
  .navbar-brand {
    flex: 0 1 auto;
    display: block;
    width: 100px;
    height: 100px; 
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%);
    text-align: center;
  }
  
  .navbar-brand img {
    max-height: 100%;
    max-width: 100%;
    border:3px solid #5f4b22;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
  }
  </code></pre>