I've been searching for hours and still can't figure it out, so I'm really hoping someone can help me solve this before I embarrass myself.
My goal is to create a navigation bar similar to the one on steamdb, where the search box remains visible even after collapsing the navbar, just reduced in size.
However, I've encountered an issue where setting the navbar to
<nav class="navbar-expand-lg" </nav>If I remove the "-lg", the navbar does not split, but it also doesn't change the items to toggle.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">My Company Name</a>
<form class="d-flex w-100 d-inline-block">
<div class="input-group">
<input class="form-control no-border" type="text" placeholder="search for game..." id="example-search-input">
<span class="input-group-append">
<button class="btn rounded-pill" type="button">
<i class="bi bi-search"></i>
</button>
</span>
</div>
</form>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
content
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/test1">test1</a></li>
<li><a class="dropdown-item" href="/test2">test2</a></li>
<li><a class="dropdown-item" href="/test3">test3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Donate</a>
</li>
</ul>
</div>
</div>
</nav>
Any assistance would be greatly appreciated, as I've been struggling with this all day.