I'm trying to create a BS5 navbar with an absolutely positioned logo that is aligned to the bottom of the navbar and overlaps the announcement section above it.
I have two issues I need help with.
Questions
Notes
I want to avoid a two navigation solution (one version for mobile and one for desktop) if possible.
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS v5.2.1 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
</head>
<body>
<header>
<section id="announcments" class="text-bg-info p-2">
<div class="row">
<div class="col text-center">Text announcment goes here</div>
</div>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark p-0 m-0">
<div class="container-xxl position-relative py-1">
<!-- logo -->
<a class="navbar-brand p-0 position-absolute bottom-0" href="https://library.livecanvas.com/sections/">
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" fill="#00ff00" class="bi bi-people-fill" viewBox="0 0 16 10">
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
</svg>
</a>
<!-- signup -->
<div class="order-lg-3 ms-auto me-3 me-lg-0">
<a class="btn btn-sm btn-warning" href="#">Subscribe</a>
</div>
<!-- Hamburger -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- main Navigation -->
<div class="collapse navbar-collapse" id="mainNav">
<ul class="d-lg-flex text-center navbar-nav mx-auto my-3 my-lg-0">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
</main>
<footer>
<!-- place footer here -->
</footer>
<!-- Bootstrap JavaScript Libraries -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"
></script>
</body>
</html>After reviewing your code, I'd like to suggest an alternative solution to address the layout issues. Please see my example below, along with a few key observations:
<header>
<section id="announcments" class="text-bg-info p-2">
<div class="container-fluid">
<div class="row">
<div class="col text-center">Text announcment goes here</div>
</div>
</div>
</section>
<!-- logo -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark p-0 m-0">
<div class="container-xxl py-1">
<a class="navbar-brand logo-top p-0 position-absolute" href="https://library.livecanvas.com/sections/">
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="110" fill="#00ff00" class="bi bi-people-fill" viewBox="0 0 16 10">
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
</svg>
</a>
<!-- signup -->
<div class="order-lg-3 ms-auto me-3 me-lg-0">
<a class="btn btn-sm btn-warning" href="#">Subscribe</a>
</div>
<!-- Hamburger -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- main Navigation -->
<div class="collapse navbar-collapse justify-content-center" id="mainNav">
<ul class="navbar-nav my-3 my-lg-0 text-center">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
</ul>
</div>
</div>
</nav>
</header>
CSS:
.navbar-brand.logo-top {
top: -62px;
}
@media (min-width: 992px) {
#mainNav {
margin-left: 82px;
}
}
Ad Section (First Section): In the #announcments section, there's a slight horizontal scroll in the browser. This is caused by the .row class, which applies negative horizontal margins (-0.75rem on each side by default). To fix this, I recommend wrapping the .row inside a .container or .container-fluid to prevent overflow beyond the viewport.
Unnecessary .position-relative Class: There's no need to add an extra .position-relative class alongside .container-xxl. Bootstrap’s .navbar class already includes position: relative by default, so the additional class is redundant.
Centering the Menu on Desktop: Since .navbar-brand is absolutely positioned, it’s removed from the normal flow of the document. This can cause the navigation menu to appear off-center on larger screens. To correct this, you can apply additional styles to #mainNav (such as margin-left) to visually rebalance the layout on desktop viewports.