Databases
StackOverflow2013
Postsdbo
PONavbar Dropdown in Bootstrap 3
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONavbar Dropdown in Bootstrap 3
    text
    copied!<p>I recently started learning and using Bootstrap 3. I figured I would start with something simple- a header and a dropdown bar. I used the code from the Bootstrap website.</p> <p>I started out with the basic Bootstrap template, then added the bootstrap navbar. This is my code so far.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;WEBSITE NAME&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;!-- Bootstrap --&gt; &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt; &lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt; &lt;!--[if lt IE 9]&gt; &lt;script src="../../assets/js/html5shiv.js"&gt;&lt;/script&gt; &lt;script src="../../assets/js/respond.min.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;WEBSITE NAME&lt;/h1&gt; &lt;nav class="navbar navbar-default" role="navigation"&gt; &lt;!-- Brand and toggle get grouped for better mobile display --&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;/div&gt; &lt;!-- Collect the nav links, forms, and other content for toggling --&gt; &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Tutorials&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Software&lt;/a&gt;&lt;/li&gt; &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;form class="navbar-form navbar-left" role="search"&gt; &lt;div class="form-group"&gt; &lt;input type="text" class="form-control" placeholder="Search"&gt; &lt;/div&gt; &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;ul class="nav navbar-nav navbar-right"&gt; &lt;li&gt;&lt;a href="https://twitter.com/"&gt;&lt;span class="glyphicon glyphicon-comment"&gt;&lt;/span&gt; Twitter&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://youtube.com/"&gt;&lt;span class="glyphicon glyphicon-facetime-video"&gt;&lt;/span&gt; YouTube&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt; &lt;/nav&gt; &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt; &lt;script src="//code.jquery.com/jquery.js"&gt;&lt;/script&gt; &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt; &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The dropdown menu is absolutely not working at all- hovering or clicking it. What do I need to do?</p> <p><strong>EDIT:</strong> I used the Safari web inspector and the resource "jquery.js" is red (indicating it is missing). This comes from the lines: I am writing this based off the default basic page from the Bootstrap site. <strong>I'm not sure what to change the path to in order to correct it.</strong> There is no 'jquery.js' file in the project folder provided.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload