The hamburger menu in Bootstrap 5 is not displaying properly on mobile screens and appears to be unstable

Although the desktop screen is working fine, I am encountering 2 issues on the mobile screen:

Check out this JSFiddle Demo: https://jsfiddle.net/uyvdqL9s/

  1. On the mobile screen, the hamburger menu appears in the center instead of on the right along with the search button. It should look like this:

https://i.sstatic.net/QpgXf.jpg

  1. When I click on the Hamburger menu, the Search button disappears and shows up inside the collapsible menu. I want it to remain in its original place as shown below: https://i.sstatic.net/odvjH.jpg

Can you please help me figure out what I'm doing wrong? I've been struggling with this issue for days now!

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

navbar class by using Bootstrap utilizes the justify-content: space-between; property

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

To achieve this, place the navigation button and search button inside a division

Here's how to do 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 the following :






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

Afterwards, remove the old search div

https://jsfiddle.net/kpfx89av/

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for making a hide and reveal FAQ section

Currently working on creating a FAQ page for my website, I ran into a challenge. My goal is to have a setup where clicking on a question will reveal the answer while hiding any previously open answers. So far, I have managed to achieve this functionality p ...

javascriptjqueryhtmlcss

Mastering card sliding and spacing in React NativeLearn how to effortlessly slide cards horizontally in your React

My aim with the following code snippet is to achieve two objectives: Apply a margin of 20 units to each card Display all four cards in a single row, allowing users to swipe horizontally Unfortunately, I have not been successful in achieving either of th ...

javascriptcssreactjsreact-nativejsx

In this guide, learn the best way to dynamically adjust image height to match the height of any device

I am trying to make sure that the image on the front page of my website fits the height of the screen or device, and resizes responsively without cropping when the device height changes. How can I achieve this? If you need a visual example of what I mean, ...

cssmobileresponsive-designcross-browser

Aligning the page content in perfect harmony with the footer

I've encountered variations of this question in the past, but I haven't found a solution that fits my specific needs. My challenge involves having a footer fixed at the bottom of a page, even when the content doesn't fill the entire page. Ad ...

htmlcss

Angular service unable to maintain data continuity across multiple controllers

I am facing an issue while attempting to set the title in controller1 using a service and then accessing the updated title in controller2. The function sharedProperties.setTitle(title) works perfectly fine in controller1, however, in controller2, I keep g ...

htmlangularjsangularjs-scopeangular-services

Interactive menu backdrop determined by div element

I am working on a website with a menu structured like the following: Home -- Work -- Pricing -- Contact Us -- About This website uses a one-page layout and has enabled Scrollspy on Bootstrap. I need to make the active menu background dynamic depending o ...

csstwitter-bootstrap

What is the best way to achieve maximum clarity in a div element while adjusting opacity?

Is there a way to have a div with an opacity of 40%, but make the text inside the div show with an opacity of 100%? #box { Background-color:#000; Opacity:40%; } ...

htmlcss

Select from a variety of backgrounds using the dropdown menu on the site

I seem to be struggling with javascript and php, but I know that in order to make this function properly, I need to utilize both languages. My goal is to set up a "select box" featuring 4 different images. There will be a default image displayed, but user ...

javascriptphpjqueryhtml

Discover the art of concurrently listening to both an event and a timer in JavaScript

Upon loading the page, a timer with an unpredictable duration initiates. I aim to activate certain actions when the countdown ends and the user presses a button. Note: The action will only commence if both conditions are met simultaneously. Note 2: To cl ...

javascripthtml

Media queries in CSS not functioning as intended

Trying to scale media requests with an image (logo) for various mobile devices like iPhone 5, 6, 6+, iPads, and large screens. Need to specify styles for portrait and landscape orientation as well. The code seems to be functioning only for iPhone 6, iPads ...

cssmedia-queries

IE11 adds additional spacing around list elements

I am encountering a peculiar issue with how Internet Explorer 11 handles unordered lists, unlike other browsers. Below is a comparison of how the ul appears in IE11: And here is how it looks in Chrome and other browsers: .iconImgBA { max-width: 2.4r ...

htmlgoogle-chromelesshtml-listsinternet-explorer-11

Converting CSS to SCSS using a for loop

I am currently learning SCSS and I have successfully converted the CSS code below to SCSS, but now I am struggling with completing the rest. I have tried looking for help online, but so far no luck. Can someone please assist me with this? .par-1 { wi ...

csssass

jQuery failing to trigger onClick event for a specific group of buttons

Javascript: <script> $(document).ready(function(){//Implementing AJAX functionality $(".acceptorbutton").on('click', function(){ var whichClicked = this.attr('name'); ...

javascriptphpjqueryhtmlajax

Tips for displaying just the image name without the entire image file path

When I try to upload an image, the path displayed is "C:\fakepath\promotion1.JPG". This fake path is causing the image not to upload to my project media folder. How can I solve this issue? Instead of the complete path, I only want to capture the ...

htmlvue.js

What steps can be taken to prevent a wrapper's CSS from affecting its enclosed elements?

My container div includes some opacity and auto height that I don't want to affect all elements within it. Is there a way to preserve the container's styles without impacting its contents? ...

htmlcss

Adjust the height of the following column to match the responsive height of the initial column

Those who have marked it as duplicate, I want to clarify that my question is not about making Bootstrap columns all the same height. Instead, I am focusing on responsive images while maintaining their aspect ratio, which is a different issue from simply en ...

htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

How can I add an active class with a 5px border-bottom on a button without increasing the button size by 5px? The box-sizing property is not working for me. Is there a simple solution to achieve this? *, *:after, *::before { -webkit-box-sizing: border ...

htmlcss

Attempting to extract the text within a table row cell by clicking on the cell directly following it

I am trying to extract the data from a table row when I click on a specific div within that row HTML: <td class="ms-cellstyle ms-vb2">10</td> <td class="ms-cellstyle ms-vb2"> <div class="ms-chkmark-container"> <div ...

javascriptjqueryhtmlcsstraversal

What is the best way to implement a collapsible feature similar to Bootstrap within AMP?

Looking to implement a collapsible feature in AMP with a smooth animation similar to Bootstrap. While I can create a collapsible by toggling classes and adjusting height with CSS, the challenge lies in accommodating varying content heights without setting ...

twitter-bootstrapbootstrap-4twitter-bootstrap-3amp-html

Arranging the elements in my footer for optimal display

My footer layout expands and the lists in each column become misaligned as I add more links to it. I want to make sure that the lists for each column are aligned horizontally on the same row, with the title of each column also in the same row. levi | ...

htmlcssvue.jsvue-material