We Keep Coding

Dropdown inside dropdown

I have a navbar with a main dropdown li tag called A, then when I display the dropdown it shows A-1 and A-2 options, A-2 it's another dropdown with other options, I tried copying the same code like if was a main dropdown but doesn't works properly, I have the code right here
However below is the code.
$(document).ready(function () {
console.log("Hi...");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top" id="Nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">APBPV</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
A <span class="caret"></span>
<ul class="dropdown-menu">
<li>A-1</li>
<li class="dropdown">A-2<b class="caret"></b>
<ul class="dropdown-menu">
<li>A-2-1</li>
<li>A-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

You will need some javascript for this to work:
$(document).ready(function(){
$('a.dropdown-toggle').on("click", function(e){
$(this).closest('li').toggleClass('open');
e.stopPropagation();
e.preventDefault();
});
});
Here is the explanation regarding the above code:
Once you click on an anchor that has the dropdown-toggle class (which mean - it's an anchor that should open the next drop-down menu) - set the class open on the above li element (which tells the next-menu to open) and prevent the default behavior of the current element.
$(document).ready(function(){
$('a.dropdown-toggle').on("click", function(e){
$(this).closest('li').toggleClass('open');
e.stopPropagation();
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top" id="Nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">APBPV</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
A <span class="caret"></span>
<ul class="dropdown-menu">
<li>A-1</li>
<li class="dropdown">A-2<b class="caret"></b>
<ul class="dropdown-menu">
<li>A-2-1</li>
<li>A-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

how to make head of dropdown link clickable in navbar

I want to make the dropdown items appear on hover of the parent link, and to be clickable to a another page, how can this be done?
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#app-nav" 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 navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
<span class="fa fa-medkit"></span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

put this css in your code
.dropdown:hover .dropdown-menu {
display: block !important;
}
check out this snippet with your code
.dropdown:hover .dropdown-menu {
display: block;
}
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#app-nav" 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 navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
</span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

this.girish - that code works perfectly.

Link to navbar that does not collapse

I want to add a link to my navbar that would stay to the right - even after navbar collapses it should stay to right. I've got it working when navbar is not collapsed, but after it collapses it goes to the next line which I don't want.
So my question is how would it be possible to keep the link on the same row after navbar collapses.
Here is my code so far:
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<a class="pull-right" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
And the code in action:
https://jsfiddle.net/av1p3x69/

You can keep copy of your link in header and then can use bootstrap's responsive utility classes like hidden-xs, hidden-md to toggle the visibility like below.
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="pull-right hidden-md" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<a class="pull-right hidden-xs" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
Check updated fiddle here
Other approach is to use media queries but this one I feel more simple. Thanks. Hope this helps you.

The link is now pulled to the right by its class name. I think it is better to put it in the navbar-right section and just give it an extra class with a float element. I've updated your code.
.nav-link {
padding-top: 15px;
padding-left: 10px;
float: right;
}
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><a class="nav-link" href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
Hope this is what you're looking for!

You can try below code, I used media query to get desire result
.right-link{
float: right;
padding-top: 15px;
padding-left: 10px;
}
#media only screen and (max-width : 768px) {
.right-link{
position: absolute;
top: 0;
right: 90px;
}
}
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<a class="right-link" href="#">Link</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<a class="nav-link" href="#">Link</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Using media query for mobile screen :
#media screen and (max-width: 680px) {
.nav-link {
position: absolute;
right: 10px;
top:0;
}
.navbar-toggle {
margin-right: 60px;
}
}

Left and right top nav bar menu, overlap when resizing

I'm using Bootstrap 3 and have a header navbar that's fixed. I have several menu items on the left and three on the right. Similar to how Stackoverflow is (minus the search bar).
When I make my browser window shrink - the right menu items go underneath the left menu items until it eventually provides the toggle switch.
How can I fix this so that it doesn't move the right menu items below the left items?
body {
min-height: 70px;
padding-top: 70px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/"><span class="som-brand-color">Brand Title</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Dashboard</li>
<li>My Account</li>
<li>Reporting Tools</li>
<li>Alerts & Notifications</li>
<li>Release Notes</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Item 1</li>
<li><i class="fa fa-cogs" aria-hidden="true"></i> Item 2</li>
<li class="dropdown">
<i class="fa fa-user" aria-hidden="true"></i> Item 3<span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Sub-item 1</li>
<li><i class="fa fa-sign-out" aria-hidden="true"></i> Sub-item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

You need to use media queries..as you have many menu items you need alter the font-size and margins according to screen sizes.
I have provided one solution with only font-size alteration
You can modify a lot of parameter to optimize the font size padding and everything.
example snippet
body {
min-height: 70px;
padding-top: 70px;
}
#media (min-width: 767px) and (max-width: 1200px) {
.navbar-nav > li > a {
font-size:8px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-brand {
font-size: 15px;
}
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/"><span class="som-brand-color">Brand Title</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Dashboard</li>
<li>My Account</li>
<li>Reporting Tools</li>
<li>Alerts & Notifications</li>
<li>Release Notes</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Item 1</li>
<li><i class="fa fa-cogs" aria-hidden="true"></i> Item 2</li>
<li class="dropdown">
<i class="fa fa-user" aria-hidden="true"></i> Item 3<span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Sub-item 1</li>
<li><i class="fa fa-sign-out" aria-hidden="true"></i> Sub-item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Note: for early collapse of navbar checkout these answers--
Bootstrap 3 Navbar Collapse
Change the default responsive navbar breakpoint

Active menu not highlighted in Boostrap and Javascript, how do I solve this?

I have tried to highlight the active menu bar via the code below but can not figure out why it is not working. Would someone kindly lead me through. Thank you.
Both my HTML and my Js scripts are below:
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Payments</li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>

$(".nav a").on("click", function(){
$(".nav li").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Payments</li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>

You need to remove your add and then add CSS to force making active for sub menu and so on
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
ul li ul li .active {background: lightskyblue; }
</style>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="active" >Payments</a></li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>