CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-5
Elaine Byene
Elaine Byene

Reputation: 4142

hamburger menu is unstable in mobile screen using Bootstrap 5

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

JSFiddle Demo: https://jsfiddle.net/uyvdqL9s/

  1. When I'm on the mobile screen, the hamburger menu appears in the middle instead of the right along with the search button. It should be like this:

enter image description here

  1. 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: enter image description here

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

Upvotes: 0

Views: 181

Answers (1)

Danial Qsk
Danial Qsk

Reputation: 483

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 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>

and replace it with this :






<div class="d-flex gap-2">

     <!--  navigation button -->
     <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>

     <!--  search division -->
     <div class="search">
        <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/

Upvotes: 1

Related Questions