Central Logo navbar with links on either side

Question

Im trying to get my navbar to look like this:

But it looks like this:

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.

  <nav class="navbar navbar-expand-md navbar-dark bg-custom fixed-top">
    <div class="container-fluid">

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mb-02 mb-md-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">GALLERY</a>
          </li>
          <!-- <a class="navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a> -->
          <li class="nav-item">
            <a class="nav-link navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">MENUS</a>
          </li>
          <li class ="nav-item nav-item-left">
            <a class="nav-link" href="#">ABOUT</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

/* 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;
}

Any reason for using `position: absolute;` on `.navbar-brand`? — Anurag Srivastava, Jul 21 '21 at 17:41
Ideally it must overlap without use of any `position` property; setting to `absolute` breaks it away from the flexbox — Anurag Srivastava, Jul 21 '21 at 17:45
Yes it can, and that can be used with `position: relative;` as well but ideally there shouldn't be a need to use that. You may need to post a working code snippet to display the incorrect behavior — Anurag Srivastava, Jul 21 '21 at 17:53
Didn't you already ask this? https://stackoverflow.com/questions/68470885/central-logo-that-overlaps-navbar-bootstrap — Carol Skelly, Jul 21 '21 at 19:38

Ishtiaq · Answer 1 · 2021-07-21T19:57:02.830

Your just need to update your navbar-brand class as follows and add custom height for ul e.g ul {height:40px;}.And finally add position: inherit; for img. Your modified/updated css will be as follows;

.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;
        }
        ul {
        height:40px;
        }

        .navbar-brand img {
            max-height: 100%;
            max-width: 100%;
            border: 3px solid #5f4b22;
            border-radius: 500px;
            -webkit-border-radius: 500px;
            -moz-border-radius: 500px;
            position: inherit;
        }

Related StackOverFlow post can also be helpful for you.

Central Logo navbar with links on either side

1 Answers1