navbarbootstrap-5eleventy

Bootstrap 5 navbar logo overlap and toggle bar items alignment

I am working on 11ty+bootstrap template and trying to make some changes. I cloned the template from Github link and currently working in localhost.

The navbar has a normal text logo with background color along with some margins and paddings.

11straps Navbar

The github link to the original navbar component is here

I am trying to get a navbar(see image below) with overlapping img logo and a toggle bar with items aligned to centre and expands pushing the body content.

Intended code view

I tried the following code edits and got this

My code changes

.navbar {
  height: 50px;

}

.nvabar-brand {
  position: relative;
  z-index: 1;
}
<nav class="navbar navbar-expand-lg fixed-top border-bottom navbar-light pt-0" style="background-color: #ffffff;">
  <div class="container">
    <a class="navbar-brand" href="{{ '/' | url }}"><img src="/img/Logo Placeholder.svg" alt="" width="50" height="100">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mt-5 mb-2 mb-lg-0 text-center">
        <li class="nav-item me-1">
          <a class="nav-link" aria-current="page" href="{{ '/' | url }}">Home</a>
        </li>

        <li class="nav-item me-1">
          <a class="nav-link" href="{{ '/default' | url }}">Sample Page</a>
        </li>

        <li class="nav-item me-1">
        <a class="nav-link" href="{{ '/blog' | url }}">Sample Blog</a>
        </li>

      </ul>
    </div>
  </div>
</nav>

Solution

  • After getting support from a reddit user the following fix has worked for me and I hope it helps!

    I had get rid of the navbar height, position and z-index in navbar-brand and instead add a separate class for logo with a negative margin bottom.

    Added the following code to the theme CSS file.

    .logo {
margin-bottom: -48px !important;
}

.navbar-brand {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

    And lastly made some minor margin and padding adjustments inside nunjuck component inline class to fix the navbar height and menu link alignment.