Floating dropdown

[LimboticWorlds]

ok, so I noticed there is a "floating" (not sure if that's the right word) drop down menu on some of the examples pages that allows you to change the page to dark or light themes. I want to use that in my website but I want to use it for bookmarks on the page. No matter what I do the dropdown menu won't "hide" and I am not sure what I am missing. I have tried combing through the differences between the HTML but I can't figure it out.
The first is what I am attempting to create, the second is what I keep getting. Hopefully you understand what I am trying to do and what I am referring to. Any help would be appreciated.
For a bit of understanding I am attempting to make the dropdown menu look like the third picture. I tried to remove .position-static but it didn't do anything. Thank you in advance.

<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
        <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (light)">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmarks-fill" viewBox="0 0 16 16">
                <path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5z"/>
                <path d="M4.268 1A2 2 0 0 1 6 0h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L13 13.768V2a1 1 0 0 0-1-1z"/>
            </svg>
        </button>
            <ul class="dropdown-menu d-block shadow" data-bs-theme="dark">
                <li>
                    <button type="button" class="dropdown-item d-flex align-items-center" aria-pressed="true">  
                        <a class="dropdown-item d-flex gap-2" href="./resume.html#experience">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-workspace" viewBox="0 0 16 16">
                                <path d="M4 16s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-5.95a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
                                <path d="M2 1a2 2 0 0 0-2 2v9.5A1.5 1.5 0 0 0 1.5 14h.653a5.4 5.4 0 0 1 1.066-2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9h-2.219c.554.654.89 1.373 1.066 2h.653a1.5 1.5 0 0 0 1.5-1.5V3a2 2 0 0 0-2-2z"/>
                            </svg>
                            Professional Experience
                        </a>
                    </button>
                </li>
                <li>
                    <button type="button" class="dropdown-item d-flex align-items-center" aria-pressed="false">
                    <a class="dropdown-item d-flex gap-2 align-items-center" href="./resume.html#skills">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wrench-adjustable" viewBox="0 0 16 16">
                            <path d="M16 4.5a4.5 4.5 0 0 1-1.703 3.526L13 5l2.959-1.11q.04.3.041.61"/>
                            <path d="M11.5 9c.653 0 1.273-.139 1.833-.39L12 5.5 11 3l3.826-1.53A4.5 4.5 0 0 0 7.29 6.092l-6.116 5.096a2.583 2.583 0 1 0 3.638 3.638L9.908 8.71A4.5 4.5 0 0 0 11.5 9m-1.292-4.361-.596.893.809-.27a.25.25 0 0 1 .287.377l-.596.893.809-.27.158.475-1.5.5a.25.25 0 0 1-.287-.376l.596-.893-.809.27a.25.25 0 0 1-.287-.377l.596-.893-.809.27-.158-.475 1.5-.5a.25.25 0 0 1 .287.376M3 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
                        </svg>
                        Skills
                    </a>
                    </button>
                </li>
                <li>
                    <button type="button" class="dropdown-item d-flex align-items-center" aria-pressed="false">
                        <a class="dropdown-item d-flex gap-2 align-items-center" href="./resume.html#education">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mortarboard-fill" viewBox="0 0 16 16">
                                <path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917z"/>
                                <path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z"/>
                            </svg>
                            Education
                        </a>
                    </button>
                </li>
            </ul>
       </div>

[Funminaima]

Going through your code, the issue might be because of the d-block class in your ul element. In Bootstrap, dropdown menus are designed to be hidden by default and only appear when toggled by adding the show class. The d-block might force element to always display as a block, which prevents the menu from hiding as expected. You might want to remove the d-block class. Let me know if this works.