Develop Reference

Bootstrap Dropdown won't expand on mobile

I have a navbar from bootstrap and one of the menus is a dropdown that allows me to select a course.
The first pic is what it looks like on my desktop when I click on courses, working perfectly fine.
When I try to select it on mobile, nothing happens.
This is the navbar code
And the scripts I include.
Any insight on this issue would be much appreciated

Here yo go with a solution https://jsfiddle.net/rskte8s5/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
Course <span class="caret"></span>
<ul class="dropdown-menu">
<li>Accounting & Information System</li>
<li>Aerospace Engineering</li>
<li>Business Information Technology</li>
<li>Computer Science</li>
<li>Electrical & Computer Engineering</li>
<li>Finance</li>
<li>Math</li>
</ul>
</li>
<li class="active">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Here is the link, I think you might find something that will work for you.
Drop-Down Menu not working on mobile devices

Navbar toggle button and dropdown menus not working

I have created a navbar but it doesn't seem to be responsive. It only works to the extent that the toggle button appears, but nothing happens when clicked. Also, the dropdown menu has no effect. I've tried various solutions mentioned on other posts but nothing seems to be working.
I've included the scripts I've linked to at the end. Please help me identify where it's going wrong
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">GrapeVine</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Areas<b class="caret"></b>
<ul class="dropdown-menu">
<li>North</li>
<li>East</li>
<li>South</li>
<li>West</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<script src="/js/myjQuery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/bootsrap.min.js" type="text/javascript"></script>

I think your problem is in your script source
replace this
/js/bootsrap.min.js
to
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

You have got "bootsrap" instead of "bootstrap" in your script source:
<script src="/js/bootsrap.min.js" type="text/javascript"></script>

Bootstrap toggle-collapse expands my navbar menu but won't collapse it

"Bootstrap toggle-collapse expands my navbar menu but won't collapse it."
I've tried messing with the classes and data-target and adding extra script to no avail. The menu expands, then when toggled again it sometimes appears to flicker like it drops down and is immediately open again but most of the time nothing seems to happen. In the Chrome inspector aria=true never becomes false. It appears like it would change but always remains true.
My scripts are located in a separate layout file but they are working. All other functionality works and this even works halfway.
Here's the current code:
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<i class="fa fa-lock"></i>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="#navbar">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="{{ path('homepage') }}"><img src="{{ asset('img/logo-blue.png') }}" alt="Podify" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse" role="navigation">
{{ mopa_bootstrap_menu('AppBundle:Builder:mainMenu', { 'automenu': 'navbar' }) }}
<!--
<ul class="nav navbar-nav">
<li role="presentation" class="active">Features <span class="sr-only">(current)</span></li>
<li role="presentation">Pricing <span class="sr-only">(current)</span></li>
<li role="presentation">Contact <span class="sr-only">(current)</span></li>
</ul>
-->
<ul class="nav navbar-right nav-pills hidden-xs">
<li class="active"><i class="fa fa-lock"></i> Login</li>
<li>Join</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
My code doesn't show the nav tag closed for some reason here but i see it when editing my post.
I imagine it's something simple i'm overlooking. Any help will of course be greatly appreciated!

<script src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
this Jquery enables Toggle functionality.

Bootstrap dropdown doesn't work

So, I know this is a common question, but I've tried everything and can't get it to work. When I click on it nothing happens. Bootstrap and JQuery load.
JFiddle: http://jsfiddle.net/qqS4F/
Code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /.btn -->
<a class="brand" href="#">S&J Bakery</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li class="dropdown" id="#dd">
<a href="#dd" class="dropdown-toggle" data-toggle="dropdown" role="button">
Menu
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li href="#lunch">Lunch</li>
<li class="divider"></li>
<li href="#cake">Cake</li>
</ul>
</li>
<li>
Contact Us
</li>
<li>
Sponsers
</li>
</ul>
<!-- /.nav -->
</div>
<!-- ./nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar navbar-inverse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar-wrapper -->

Tips48,
It looks like you are using a version of the bootstrap css file that doesn't account for dropdown menus. I've updated the fiddle with the correct items and it is working properly for me (see screenshot below):
In case you need the link to the css file, here it is. Also, you can grab the latest version from the main site at http://twitter.github.io/bootstrap/index.html One nice feature is the "Customize" section, where you can tweak what you want/don't want in your project. Hopefully this helps.
Good luck and have fun!

Why does my bootstrap nav bar italicize instead of adding the active class to the active tab?

My bootstrap nav bar adds a span and italicizes the active tab instead of just adding the active class to the active tab. My code is as follows:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Wutup?!</a>
<div class="nav-collapse">
<wicket:link>
<ul class="nav">
<li>Nearby Events</li>
<li>My Events</li>
<li>Manage My Events</li>
<li>About</li>
</ul>
</wicket:link>
</div>
</div>
</div>
</div>
The behavior can be seen here: screenshot

When you use the wicket auto-link feauture (i.e. wicket:link) it generates span instead of adding class to your HTML. For example if "My evenets" was the active page, the could would look like this:
<ul class="nav">
<li>Nearby Events</li>
<li><span><em>My Events</em></span></li>
<li>Manage My Events</li>
<li>About</li>
</ul>
If you want to avoid that, you should not use the autolinking feauture, or just change the css to suits the wicket's html that is generated.