bootstrap dropdown button is not working inside of the collapsed navbar <p>I'm building a website that has a dropdown button with two categories. The dropdown works perfectly on a desktop but when the navbar is collapsed on a small screen, it doesnt work. I've looked for an answer here on stack overflow but nothing has my exact same problem. I need the dropdown to show the two links when I touch the dropdown button. This is a bootstrap website that uses a scroll spy to navigate to different sections of a single index.html page. Jquery is embedded properly as well as bootstrap.min.css, bootstrap.js, and bootstrap.css. And also the navbar is fixed to the top of the page. The navbar collapses perfectly on a small screen but its the dropdown that is not working when the navbar is collapsed. To clarify I should say that it is not the navbar toggle button that I am referring to, only the dropdown button inside of the navbar. It will not open to reveal the links when the navbar is collapsed. When i click the caret, the navbar closes.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body id="home" data-spy="scroll" data-target=".navbar-collapse"&gt; &lt;nav class="navbar navbar-default navbar-fixed-top"&gt; &lt;div class="container-fluid"&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="true" aria-controls="navbar"&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt; &lt;a href="#home" class="navbar-brand smoothScroll"&gt;&lt;strong&gt;Third Base&lt;/strong&gt;&lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div class="collapse navbar-collapse" id="myNavbar"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li&gt;&lt;a href="#home" class="smoothScroll"&gt;HOME&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#about" class="smoothScroll"&gt;ABOUT&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact" class="smoothScroll"&gt;CONTACT&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#gallery" class="smoothScroll"&gt;MENU&lt;/a&gt;&lt;/li&gt; &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;TEAMS &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#roster1" class="smoothScroll"&gt;DARTS&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#roster2" class="smoothScroll"&gt;SOFTBALL&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;!-- end about --&gt; &lt;!-- start footer --&gt; &lt;footer&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col-md-12"&gt; &lt;p&gt;Copyright &amp;copy; 2015 Third Base Sports Bar &amp; Grill&lt;/p&gt; &lt;hr&gt; &lt;ul class="social-icon"&gt; &lt;li&gt;&lt;a href="#" class="fa fa-facebook"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="fa fa-twitter"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="fa fa-instagram"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="fa fa-pinterest"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="fa fa-google"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="fa fa-github"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="fa fa-apple"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/footer&gt; &lt;!-- end footer --&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script src="js/plugins.js"&gt;&lt;/script&gt; &lt;script src="js/smoothscroll.js"&gt;&lt;/script&gt; &lt;script src="js/custom.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </p>