Collapse button showing up in between links on medium screen - html

Question

I'm struggling with getting the navbar elements in the right order.
On small screens (phone) the collapse button shows up on top of the links, but for some reason on medium screens it shows up before the last link in the menu. Anyone has a solution to this and tell me what's causing this? Many thanks in advance!
Codepen:
https://codepen.io/laurent-bosteels/pen/qBRKQor
HTML
<div class="container-fluid">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DISCOVER</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRICING</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a href="index.html" class="navbar-brand d-none d-lg-block me-auto" alt="logo" aria-label="ad astra logo">
<svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.1 160.4"
enable-background="new 0 0 231.1 160.4" xml:space="preserve">
<g>
<path class="logo-fill" fill="#959595" d="M228.6,0h-12.5c-1.8,0-3.1,1.2-3.7,3.5l-11.7,36.4h-60.3L128.7,3.5C128.2,1.2,127,0,125.2,0h-12.7
c-2.2,0-2.9,1.2-2.2,3.5l46.6,153.4c0.7,2.3,2.2,3.5,4.7,3.5h17.9c2.5,0,4.1-1.2,4.7-3.5L230.8,3.5C231.5,1.2,230.8,0,228.6,0z
M171,141.7h-1l-25.7-86.3h52.3L171,141.7z" />
<path class="logo-fill" fill="#959595" d="M74.2,3.5C73.6,1.2,72,0,69.5,0H51.6c-2.5,0-4.1,1.2-4.7,3.5L0.2,156.9c-0.7,2.3,0.1,3.5,2.2,3.5h12.5
c1.8,0,3.1-1.2,3.7-3.5l11.7-36.4h60.3l11.7,36.4c0.5,2.3,1.7,3.5,3.5,3.5h12.7c2.2,0,2.9-1.2,2.2-3.5L74.2,3.5z M34.4,105L60,18.7
h1L86.7,105H34.4z" />
</g>
</svg>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
.navbar-custom {
background-color: #0D1521;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #F8F9F9;
}
.navbar-custom .navbar-brand {
padding: 0;
}
.nav-link {
font-size: 1.15rem;
margin-right: 2rem;
margin-left: 2rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.navbar-nav .nav-item:not(:last-child) {
border-right: 1px solid rgb(46 57 67);
}

Answer 1

If all you’re looking to do is to have the collapse button at the top of the menu when it’s open, then you could put the button at the start of the navbar. Then, when it’s clicked, the button will move up the screen to show the menu.
The order-0, -1, -3 didn’t seem to be doing anything, so I took those out.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<style>
.navbar-custom {
background-color: #0D1521;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #F8F9F9;
}
.navbar-custom .navbar-brand {
padding: 0;
}
.nav-link {
font-size: 1.15rem;
margin-right: 2rem;
margin-left: 2rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.navbar-nav .nav-item:not(:last-child) {
border-right: 1px solid rgb(46 57 67);
}
</style>
<nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-bottom">
<div class="container-fluid">
<button class="navbar-toggler mx-auto" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 order-md-0 dual-collapse2">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DISCOVER</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRICING</a>
</li>
</ul>
</div>
<a href="index.html" class="navbar-brand d-none d-lg-block me-auto" aria-label="ad astra logo">
<svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.1 160.4" enable-background="new 0 0 231.1 160.4" xml:space="preserve">
<g>
<path class="logo-fill" fill="#959595" d="M228.6,0h-12.5c-1.8,0-3.1,1.2-3.7,3.5l-11.7,36.4h-60.3L128.7,3.5C128.2,1.2,127,0,125.2,0h-12.7
c-2.2,0-2.9,1.2-2.2,3.5l46.6,153.4c0.7,2.3,2.2,3.5,4.7,3.5h17.9c2.5,0,4.1-1.2,4.7-3.5L230.8,3.5C231.5,1.2,230.8,0,228.6,0z
M171,141.7h-1l-25.7-86.3h52.3L171,141.7z" />
<path class="logo-fill" fill="#959595" d="M74.2,3.5C73.6,1.2,72,0,69.5,0H51.6c-2.5,0-4.1,1.2-4.7,3.5L0.2,156.9c-0.7,2.3,0.1,3.5,2.2,3.5h12.5
c1.8,0,3.1-1.2,3.7-3.5l11.7-36.4h60.3l11.7,36.4c0.5,2.3,1.7,3.5,3.5,3.5h12.7c2.2,0,2.9-1.2,2.2-3.5L74.2,3.5z M34.4,105L60,18.7
h1L86.7,105H34.4z" />
</g>
</svg>
</a>
<div class="navbar-collapse collapse w-100 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>