[FIXED] How can I fix a toggle switch with a dropdown box in a header?

Issue

<li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Contacts
                        <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <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.

Solution

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.

Answered By - Logan Manor

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)