How can I fix a toggle switch with a dropdown box in a header?-CodePudding

<li >
                        <a  data-toggle="dropdown" href="#" aria-expanded="false">Contacts
                        <span ></span></a>
                            <ul >
                                <li><a href="#">Email</a></li>
                                <li><a rel="noopener" href="#" target="_blank">LinkedIn</a></li>
                                <li><a rel="noopener" href="#">Github</a></li>
                                <li><a rel="noopener" href="#" target="_blank">Stackoverflow</a></li>
                            </ul>
                    </li>

I am having an issue with a dropdown box in my header. I have been looking all over on the bootstrap website and w3schools and I have found stuff but it seems like nothing has worked so I wanted to see if anyone else had this problem and if there was a solution.

What is happening is when I select the dropdown it does not want to toggle. I even made sure to have the toggle class. When I type in it will stay stuck open, so something is wrong with the toggle but I have not been able to find the solution.

CodePudding user response：

one of bootstrap 5 changes is using data-bs-... instead of data-... attributes, so try data-bs-toggle="dropdown" attribute

CodePudding user response：

It is going to look stupid but, please if you have this problem, make sure to include the bootstrap script at the bottom of the body. It will make your life much easier lol.