hamburger menu is unstable in mobile screen using Bootstrap 5-CodePudding

Desktop screen is good but facing 2 issues with mobile screen:

JSFiddle Demo:

When I click on the Hamburger menu, the Search button disappears and shows up inside the collapsible menu. I want this to remain where it is as shown below:

What am I doing wrong? Please help. I've been struggling with this for days now!

CodePudding user response：

navbar class in bootstrap use justify-content: space-between; property

 /* Distribute items evenly
 The first item is flush with the start,
 the last is flush with the end */

what you should do is put navigation button and search button inside a division so

select it :

     <button  type="button" data-bs-toggle="collapse" 
     data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria- 
     expanded="false" aria-label="Toggle navigation">
     <span ></span>
     </button>

and replace it with this :






<div >

     <!--  navigation button -->
     <button  type="button" data-bs-toggle="collapse" 
     data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria- 
     expanded="false" aria-label="Toggle navigation">
     <span ></span>
     </button>

     <!--  search division -->
     <div >
        <button data-bs-toggle="offcanvas" href="#demo">S</button>
     </div>

</div>

then delete old search div

https://jsfiddle.net/kpfx89av/

Edit update : https://jsfiddle.net/yqhvm5pk/15/