I'm having trouble implementing Bootstrap 5 OffCanvas within the Navbar on laptop/desktop screens. It seems to only work properly on mobile screens with a size of sm or lower, displaying the hamburger menu. Any suggestions on how to make it functional on larger screens?
JSFIddle Demo: https://jsfiddle.net/emzrf80v/
HTML:
<header class="menu">
<nav class="navbar navbar-expand-sm">
<div class="container">
<a class="navbar-brand" href="#">
<img src="" class="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
hey
</div>
<div class="d-flex"><span class="icon icon-search"></span></div>
<div class="offcanvas offcanvas-top" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Offcanvas Sidebar</h3>
<p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
</div>
</div>
</nav>
</header>