I am trying to make a Navbar in Bootstrap 5. I would like to have the Logo (In my case this is just some fancy text) on the left. I would then like the menu centered and my search field on the right. The issue I seem to be having is when I have managed to get them lined up like this, the menu is going in the center of the search and logo divs, which due to logo size etc hasn't necessarily been the middle of my screen like I want. I have been at it for days trying different things on her but just can't seem to get it right. I also want the mobile menu to collapse and include the search. The mobile menu should then have the logo aligned in the center and the collapse button just below it also centered.
The latest code I have tried is this:
index.html:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}Life With Vicky</title>
<meta name="description" content="{% block meta_description %}{%endblock %}">
{% block canonical %}{%endblock %}
{% block opengraph %}{%endblock %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" type='text/css' href="{% static 'css/main.css' %}">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md py-3 w-100" style="background-color:#FCC1C5">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center" href="{% url 'home' %}">
<span>
Life With Vicky
</span>
</a>
<button class="navbar-toggler ml-auto" data-bs-toggle="collapse" data-bs-target="#navcol-6"><span
class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div id="navcol-6" class="collapse navbar-collapse flex-grow-0 order-md-first">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link {% if active_tab == 'home' %}active{% endif %}"
href="{% url 'home' %}">Home</a></li>
<li class="nav-item"><a class="nav-link {% if active_tab == 'blog' %}active{% endif %}"
href="{% url 'blog' %}">Blog</a></li>
<li class="nav-item"><a class="nav-link {% if active_tab == 'about' %}active{% endif %}"
href="{% url 'about' %}">About</a></li>
<li class="nav-item"><a class="nav-link {% if active_tab == 'recommendations' %}active{% endif %}"
href="{% url 'recommendations' %}">Recommendations</a></li>
<li class="nav-item"><a class="nav-link {% if active_tab == 'contact' %}active{% endif %}"
href="{% url 'contact' %}">Contact</a></li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright © Life With Vicky</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
</body>
</html>
The templating stuff is just because I am doing this with Django.
main.css:
@font-face {
font-family: 'vi-my-ha-hoa';
src: url('../fonts/vi-my-ha-hoa.ttf') format("truetype");
}
.navbar-brand {
font-family: 'vi-my-ha-hoa';
font-size: 3rem;
word-spacing: 0.4rem;
}
.carousel-image {
height: 400px;
object-fit: cover !important;
}
.carousel-item>div {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.navbar-dark {
--bs-navbar-color: #ffffff;
--bs-navbar-hover-color: #ffffff;
--bs-navbar-active-color: #fff;
}
