Develop Reference

Bootstrap 3 - Hover menu on desktop but open on click when minimized (mobile nav)

Using Bootstrap 3.
I'm trying to keep my site's navigation working using hover on the desktop but when using mobile navigation I want the navigation to open on click. I can't seem to get my options to work with what I've got. I don't have a great grasp on CSS so I may be screwing this up with something small... or large...
Right now the site works fine on the desktop version with the navigation open on click then hover opens the remaining sub links. The problem is when I reduce the page width to the mobile version the navigation does not work as I want. What I am getting is the navigation opening up on hover but I want each link to open on click only.
I've created a bootply as an example: http://www.bootply.com/tjL1FPgPT4
HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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">SiteName</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
LinkHere<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Names</li>
<li class="menu-item dropdown dropdown-submenu">
Level1
<ul class="dropdown-menu">
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.1
<ul class="dropdown-menu">
<li>
Level3-Link1
Level3-Link2
</li>
</ul>
</li>
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.2
<ul class="dropdown-menu">
<li>
Level3.1
Level3.2
</li>
</ul>
</li>
</ul>
</li><li class="menu-item dropdown dropdown-submenu">
OtherLink
<ul class="dropdown-menu">
<li class="menu-item ">
Link1
Link2
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Email</li>
<li class="menu-item ">
Yahoo
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Phone</li>
<li class="menu-item ">
CallNow
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/.nav-collapse -->
and CSS:
/*custom for submenu here*/
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
#media only screen and (max-width:767px){
.dropdown-submenu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
.navbar-nav .dropdown-menu .dropdown-submenu > a{
display:block;
margin-top: 0;
}
}

Change your css to this
#media only screen and (min-width:768px){
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
also add this script to page.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Here is updated bootply. Hope this helps you.

Bootstrap responsive multi-level navigation menu

I have coded a multi-level navigation menu for bootstrap. It works well in 1200px and above. But when the screen size is under 1200px (I have set 1200px as the breapoint) the first level dropdown menu opens/closes on click well, but the second level dropdown menu does not open on click. I want this second level dropdown menu to open on screensizes below 1200 when its parent anchor is clicked.
For example when services > cosmetic dentistry is clicked on lower than 1200px screen size, I want the '.dropdown-menu' inside it (dental hygiene, dentures etc) to show up/toggleshow(hides on click again).
How can I achieve this?
This is the HTML:
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-inner">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li class="dropdown">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Offers/Fees <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Patients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li>Blog</li>
<li>Referrals</li>
<li>Contact</li>
</ul>
</div>
</div><!-- end navbar-inner -->
</div><!-- end container -->
</nav><!-- end navbar -->
The CSS:
#navbar {
clear: both;
border-radius: 0;
border: 0;
margin: 0;
background: #f9f9f9;
height: auto;
}
#navbar li a {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
color: #575757;
padding-top: 20px;
padding-bottom: 20px;
}
#navbar li a:hover {
color: #7bcfdc
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 0;
width: 240px;
padding: 0;
}
.dropdown-submenu {
position:relative;
border-radius: 0;
padding: 0;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-1px;
margin-left:-1px;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
}
#navbar .navbar-nav li a i {
margin-left: 5px;
}
#navbar .navbar-nav li li a{
background: #eee;
text-transform: none;
padding-top: 11px;
padding-bottom: 11px;
}
#navbar .navbar-nav li li {
position: relative;
}
#navbar .navbar-nav li li i {
position: absolute;
right: 20px;
top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
background: #ff4e4f;
color: #FFF;
}
/*----- RESPONSIVE STYLES ------*/
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
#media screen and (max-width: 768px) {
.header-top p {
text-align: center;
}
.header-top a {
margin: 10px auto 0 auto;
clear: both;
display: block;
}
}
#media screen and (min-width: 1200px) {
#navbar .dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
I made a JSFiddle for this:
https://jsfiddle.net/Lefosx46/

I took a look at your code. There's a lot going on, so while my answer should work there may be more efficient ways of doing it. It might at least point you in the right direction.
There seemed to be an issue with:
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
I removed that and added:
#media screen and (max-width: 1199px) {
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
}
You can see a fiddle here: https://jsfiddle.net/t4rnz8dg/
Apologies if I've misunderstood your question!

Bootstrap not closing menu

I maked one html site using bootstrap. That sites have one menu but i think problem is my javascript i maked it that auto open when mouseover it menu but not closed automatic.
(function($){
$(document).ready(function(){
$('ul.nav [data-toggle=dropdown]').on('mouseover', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
.navbar-brand {display:none;}
.fullwidth {width:100%; background:#1e537f;}
.navbar {
position: relative;
min-height: 40px;
margin-bottom: 0;
border: 1px solid transparent;
width:100%;
text-align:center;
}
.navbar-header {}
.navbar-inverse .navbar-nav>li>a {color:#FFFFFF;}
.navbar-inverse
{background:#1e537f; text-align:center;}
.navbar-nav>li {text-align:center;}
.navbar-inverse .navbar-brand {color:#FFFFFF;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background:#143957;}
.navbar-inverse .navbar-toggle {background:#143957; border:none;}
.navbar-nav>a:hover {background:#1b4b72;}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {background:#1b4b72;}
.navbar ul{text-align:center; padding:0 0 0 30%; }
.navbar ul li {text-align:left;}
.navbar ul li ul {padding:0;}
.navbar-nav>li>.dropdown-menu {background:#1b4b72; }
.navbar-inverse .navbar-nav>li>a:hover {background:#1b4b72;}
.dropdown-menu {border:none; }
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #FFFFFF;
white-space: nowrap;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background:#143957;
color:#FFFFFF; }
.dropdown-menu>li>a:hover {
display: block;
background:#143957;
color:#FFFFFF;
border-radius:4px;
}
.dropdown-submenu>.dropdown-menu {background:#1b4b72;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:0;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.carousel-indicators li {width:40px; height:40px;border-radius:50%; background:#FFFFFF;}
.carousel-indicators .active {width:40px; height:40px;border-radius:50%; background:#1e537f; border:none;}
.carousel-caption {margin-bottom:80px;}
.carousel-caption h2{ font-size:46px;}
.carousel-control.right, .carousel-control.left {background:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#" target="_blank">Menu</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li> Anasayfa </li>
<li class="dropdown"> Kurumsal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Hakkımızda </li>
<li>Çözüm Ortaklarımız </li>
<li>Sosyal Sorumluluk </li>
<li>Basın Odası </li>
</ul></li>
<li class="dropdown">Hizmetler <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">Araç Sigortaları
<ul class="dropdown-menu">
<li>Tam Kasko Paket Poliçesi </li>
<li>Trafik Sigortası </li>
<li>Yeşil Kart Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">İşyeri ve Konut Sigortaları
<ul class="dropdown-menu">
<li>İşyeri Paket Sigortaları </li>
<li>Konut Paket Sigortaları </li>
<li>Dask Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">Sorumluluk Sigortaları
<ul class="dropdown-menu">
<li>Üçüncü Şahıs Mali Sorumluluk </li>
<li>Asansör Sorumluluk</li>
<li>İşveren Sorumluluk</li>
<li>Mesleki Sorumluluk</li>
<li>Zorunlu Hekim Sigortası</li>
<li>Ferdi Kaza Sigortası</li>
<li>Taşınan Para Sigortası</li>
<li>Emniyeti Suistimal Sigortası</li>
<li>Ürün Mali Sorumluluk Sigortası</li>
<li>Seyahat Sigortası</li>
</ul></li>
<li class="dropdown dropdown-submenu">Nakliyat Sigortaları
<ul class="dropdown-menu">
<li>Mal Nakli Sigortaları </li>
<li>Nakliyat Sorumluluk Sigortaları</li>
<li>Deniz Araçları Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">Mühendislik Sigortaları
<ul class="dropdown-menu">
<li>Elektronik Cihaz Sigortası </li>
<li>Makina Kırılması Sigortası</li>
<li>İnşaat Sigortası</li>
</ul></li>
<li class="dropdown dropdown-submenu">Sağlık Sigortaları
<ul class="dropdown-menu">
<li>Sağlık Sigortası </li>
<li>Tamamlayıcı Sağlık Sigortası</li>
</ul></li>
</ul>
</li>
<li> Servisler </li>
<li> Kariyer </li>
<li> İletişim </li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
You can test my code it is on up.

You will want to create a mouseenter function for the dropdown toggle and then a mouseleave function for the dropdown and dropdown-submenu. If im understanding your problem correctly. So your code should look something like this I think.
$('ul.nav [data-toggle=dropdown').on({
mouseenter: function(event) {
if (!$(this).hasClass("open")) {
$(this).parent().toggleClass('open');
}
}
});
$('ul.nav .dropdown, .dropdown-submenu').on({
mouseleave: function(event) {
if ($(this).hasClass("open")) {
$(this).toggleClass('open');
}
}
});
Here is a link to a fiddle with it working Fiddle.
Just to let you know you may run into some problems with your menu being too long because when the mouse leaves the dropdown menu and submenus the menu will close so they will not be able to scroll down to see all of the links but if I understand your problem correctly I think this should solve your problem.
P.S I left the event in there in case you need an event to be executed but if not you can take it out.

Dropdown menu bootstrap multilevel

I have some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}

Bootstrap Navbar Dropdown on Hover if not mobile

I am trying to make bootstrap dropdown list from navbar to appear on hover but stop the hover effect on collapsed (mobile). This is what I have in mind, but when I add the if statement the whole effect doesnt work:
HTML:
<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 vaos" href="../index.html">VAOS</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a class="trans" href="../index.html">Home</a></li>
<li class="dropdown">
What is VAOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>VAOS & Other Options</li>
<li>Am I a Candidate</li>
<li>Find a Surgeon</li>
<li><div class="ArrowUp1"></div></li>
</ul>
</li>
<li>Testimonials</li>
<li class="dropdown">
Resources <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Clinical Support</li>
<li>Procedural Videos</li>
<li>Other Links & Resources</li>
<li><div class="ArrowUp2"></div></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
CSS:
#media (min-width: 768px) {
.navbar-nav .open ul {
display: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background: none;
}
.navbar-default .navbar-nav > li:hover {
background: #e7e7e7;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #969696;
background: none;
}
.navbar-nav > li:hover {
background: transparent !important;
}
.navbar-nav .hovernav:hover > .dropdown-menu {
display: block;
}
}
JavaScript:
'use strict';
$('ul.nav li.dropdown').hover(function() {
if(window.width > 767) {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
}
});

You can do it without any scripting language.
Just try this.
#media screen and (min-width: 768px) {
.dropdown:hover>.dropdown-menu {
display: block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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.4/js/bootstrap.min.js"></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 vaos" href="../index.html">VAOS</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a class="trans" href="../index.html">Home</a>
</li>
<li class="dropdown"> What is VAOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>VAOS & Other Options
</li>
<li>Am I a Candidate
</li>
<li>Find a Surgeon
</li>
<li>
<div class="ArrowUp1"></div>
</li>
</ul>
</li>
<li>Testimonials
</li>
<li class="dropdown"> Resources <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Clinical Support
</li>
<li>Procedural Videos
</li>
<li>Other Links & Resources
</li>
<li>
<div class="ArrowUp2"></div>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
It is smooth and handy. +1 if it helps.

Use the css hover for the item with class dropdown and set the dropdown-menu class to diplay block
#media screen and (min-width: 768px) {
li.dropdown:hover .dropdown-menu{
display:block;
}
}