Two-column collapsed navbar in Bootstrap 5 doesn't work - html

Question

I'm making this Bootstrap 5 navbar, which should collapse at md breakpoint. After the collapse, it should show navlinks in two columns.
When I hit the breakpoint, my navbar is expanded and toggle button doesn't work.
It changes, when I switch off the display: flex property for the navbar - the collapse function works, but my ul's (in which I group li's) are in one column.
How can I reach my goal here - navbar with six elements collapses at md breakpoint and breaks the links into two columns?
<nav class="navbar navbar-expand-md navbar-light sticky-top w-100">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navUl navbar-nav">
<li class="nav-item">
<a class="nav-link text-nowrap" aria-current="page" href="/aboutMe">o mnie</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/beforePS">przed sesją</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navbar-brand" href="/">
<img src="/images/logoKP-trans.png" class="img-fluid" alt="Karolina_photography_logo" id="logo">
</a>
</li>
</ul>
<ul class="navUl navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/voucher">vouchery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/pricing">pakiety</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">kontakt</a>
</li>
</ul>
</div>
css (very messy, to be optimised):
body {
background-color: #f8edeb;
margin: 0;
font-family: "Quicksand", sans-serif;
font-weight: 400;
opacity: 0;
animation: fadeIn 0.5s;
transition: opacity 0.5s;
}
main {
align-items: center;
margin: 3% 20%;
max-width: 80%;
}
.navbar,
.footer {
background-color: #fae1dd;
color: rgba(0, 0, 0, 0.5);
box-shadow: 10px 5px 5px rgba(202, 178, 174, 0.5);
padding-top: 0;
text-align: center;
}
#mainNavbar {
display: flex;
justify-content: center;
align-items:flex-end;
}
.navbar-brand {
margin: 0;
}
.nav-item {
display: flex;
margin: 0 0.8em;
font-size: 1.2rem;
}
.navUl {
padding-bottom: 10px;
}
.navbar-brand {
max-width: 300px;
height: auto;
padding-bottom: 0;
top: 0.4rem;
}
#mainNavbar a:hover,
#socialIcons a:hover,
.loginButton a:hover {
color: white;
text-shadow: 5px 5px 10px white;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.dropdown-menu {
border-radius: 0.5rem;
background-color: rgba(250, 225, 221, 0.9);
}
.dropdown-item:hover {
background-color: transparent;
}
#socialIcons {
color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 10px;
right: 10px;
}
#socialIcons a,
#kidsPshoot {
text-decoration: none;
color: rgba(0, 0, 0, 0.5);
display: inline;
margin-right: 0.5rem;
}
.fade_rule {
height: 1px;
background-color: #e6e6e6;
width: 50%;
margin: 0 auto;
background-image: linear-gradient(left, white 2%, #e6e6e6 50%, white 98%);
background-image: -o-linear-gradient(left, white 2%, #e6e6e6 50%, white 98%);
background-image: -moz-linear-gradient(
left,
white 2%,
#e6e6e6 50%,
white 98%
);
background-image: -webkit-linear-gradient(
left,
white 2%,
#e6e6e6 50%,
white 98%
);
background-image: -ms-linear-gradient(left, white 2%, #e6e6e6 50%, white 98%);
background-image: -webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0.02, white),
color-stop(0.5, rgb(250, 182, 170)),
color-stop(0.98, white)
);
}
#media (max-width:1200px) {
.nav-item, .dropdown-item, #aboutMeText, p, li, h5 {
font-size: 1rem;
}
#logo {
max-width: 230px;
}
.navUl {
padding-bottom: 5px;
}
}
#media (max-width:992px) {
#logo {
max-width: 200px;
/* position: absolute;
left: 70%;
top: 30%; */
}
.nav-item, .dropdown-item {
font-size: 0.9rem;
}
.nav-item {
margin: 0;
}
}
#media (max-width:768px) {
.nav-item, .dropdown-item, #navbarDropdownMenuLink, p, li {
font-size: 0.7rem;
margin-left: 0;
text-align: left;
min-width: 100px;
}
#mainNav {
position:unset;
}
}

Answer 1

It’s not clear what all of your CSS is for. Some, like setting the opacity on the body to 0 hide everything. It’s best to have a running snippet with your question.
If you want your logo in the center, you can split your menus into two unordered lists.
For applying margin such as to the bottom of the navbar-nav, use the Bootstrap spacing utility classes (mb-1 mb-md-2).
Copy the Bootstrap media query logic (min-width, not max-width – it’s difficult to troubleshoot with two methods) and apply your media queries starting with the smallest size (no media query), followed by increasing media query sizes (min-width: 576px, min-width: 768px, etc.).
Rather than using smaller text for smaller screens, keep the text the same size and adjust the position if the text won’t fit (smaller text is more difficult for some users to read).
One way to have two columns for the links in the collapsed version is to add a spacer div (.break) that can force the navbar-collapse divs to the next row, and then set their width to 50%.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
background-color: #f8edeb;
font-family: "Quicksand", sans-serif;
}
.navbar,
.footer {
background-color: #fae1dd;
color: rgba(0, 0, 0, 0.5);
box-shadow: 10px 5px 5px rgba(202, 178, 174, 0.5);
padding-top: 0;
}
.navbar-brand {
margin: 0;
max-width: 300px;
height: auto;
padding-bottom: 0;
top: 0.4rem;
}
#mainNavbar a:hover,
#socialIcons a:hover,
.loginButton a:hover {
color: white;
text-shadow: 5px 5px 10px white;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.dropdown-menu {
border-radius: 0.5rem;
background-color: rgba(250, 225, 221, 0.9);
max-width: 75%;
}
.dropdown-item:hover {
background-color: #E0C9C5;
}
#logo {
max-width: 120px;
height: auto;
}
#media (min-width: 576px) {
#logo {
max-width: 160px;
}
}
#media (min-width: 768px) {
#logo {
max-width: 200px;
}
.navbar-collapse.flex-basis-md-0 {
flex-basis: 0;
}
}
#media (min-width: 992px) {
#logo {
max-width: 230px;
}
}
#media (min-width: 1200px) {
#logo {
max-width: 300px;
}
}
.navbar-collapse {
max-width: 50%;
}
/* Inserting div.break between two flex items will make
* the flex item that comes after it break to a new row -
* this is how the two-column navbar-collapse are moved to
* a separate row. */
.break {
flex-basis: 100%;
height: 0;
}
#media (min-width: 768px) {
.break {
display: none;
}
}
</style>
<nav class="navbar navbar-expand-md navbar-light sticky-top w-100">
<div class="container-fluid justify-content-md-around">
<a class="navbar-brand order-md-1" href="#">
<img id="logo" src="https://via.placeholder.com/120x40.png/E5FFFF/?text=KP-Trans" alt="" width="300" height="60">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".mainNavbar" aria-controls="mainNavbar1 mainNavbar2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="break"></div>
<div class="collapse navbar-collapse flex-basis-md-0 mainNavbar" id="mainNavbar1">
<ul class="navbar-nav mx-md-auto">
<li class="nav-item">
<a class="nav-link text-nowrap" aria-current="page" href="/aboutMe">o mnie</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
portfolio
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">portfolio #1</a></li>
<li><a class="dropdown-item" href="#">portfolio #2</a></li>
<li><a class="dropdown-item" href="#">portfolio #3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/beforePS">przed sesją</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse flex-basis-md-0 align-self-start align-self-md-center mainNavbar order-md-2" id="mainNavbar2">
<ul class="navbar-nav mx-md-auto">
<li class="nav-item">
<a class="nav-link" href="/voucher">vouchery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/pricing">pakiety</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<section>
<div class="container">
<div class="row">
<div class="col vh-100">
<p class="text-center">
Center
</p>
</div>
</div>
</div>
</section>
It's also helpful if you include a placeholder image at the right size to match your logo. I guessed at 120 by 40