CODEWITHSUNDEEP
navbardropdownbootstrap-5
wookietreiber
wookietreiber

Reputation: 1

Bootstrap 5: Responsive Dropdown Burgerbutton

I'm new to web programming and I'm trying to make a responsive navbar with a burger button but using a dropdown menu instead of the usual menu. The button is displayed and the dropdown items seem to be underneath as well, however the menu does not pop up after click. Does anyone have any idea where my error is? Thanks in advance!

Here's my code:

https://www.codeply.com/p/GpBf0iDq5o

The crazy thing is, I get exactly what I want but only in Bootstrap 4:

https://www.codeply.com/p/1Ktj7Ef5cl

But unfortunately it has to be implemented in Bootstrap 5.

Upvotes: 0

Views: 637

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

Remove the outer dropdown div wrapper from the dropdown menu.

        <button data-bs-toggle="dropdown" class="btn">
            <div id="wrapper">
                <div class="circle icon">
                    <span class="line top"></span>
                    <span class="line middle"></span>
                    <span class="line bottom"></span>
                </div>
            </div>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1" data-bs-toggle="dropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>

Upvotes: 1

Related Questions