In my Bootstrap 5 navbar, I have a search bar, notifications dropdown, and collapsible buttons. How can I ensure that the search bar is visible in the expanded version of the navbar and hidden when the navbar is collapsed, while keeping the notifications dropdown always visible?
HTML:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Site</a>
<form id="search" class="form-inline d-flex me-auto">
<input class="form-control" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success" type="submit">Go</button>
</form>
<div class="d-flex">
<div class="dropdown">
<a class="btn btn-secondary me-1" role="button" id="dropdownMenuLink"
data-bs-toggle="dropdown" aria-expanded="false">
<div id="ex4">
<span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
<i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
</span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="notifications-header">
<h1>Notifications</h1>
</div>
<div id="notifications">
</div>
</div>
</div>
<button class="navbar-toggler ms-1" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="btn btn-success ms-1 me-1 mt-2 mb-2">Button One</a>
</li>
<li class="nav-item">
<a href="#" class="btn btn-secondary ms-1 me-1 mt-2 mb-2">Button Two</a>
</li>
<li class="nav-item">
<form name="button-three" class="ms-1 me-1 mt-2 mb-2">
<button type="submit" class="btn btn-danger">Button Three</button>
</form>
</li>
</ul>
</div>
</div>
</nav>
CSS:
#navbarSupportedContent {
max-width: intrinsic; /* Safari/WebKit uses a non-standard name */
max-width: -moz-fit-content; /* Firefox/Gecko */
max-width: -webkit-fit-content; /* Chrome */
max-width: fit-content;
}
.btn {
white-space: nowrap;
}