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.
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.
I tried the following code edits and got this
.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>
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.