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.
- Centering the navigation links. The navigation is nolonger centeredon desktop after positioning the logo. I understand that positioning thelogo is the cause.
- On mobile the logo sticks to the bottom of the nav when theHamburger is activated. I would like it to maintain its originalposition. Again it is the absolute positioning that is causing theissue.
Questions
- Am I approaching this in the best possible way? If so, how do Icorrect the two issues?
- Is there a better way?
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>