Is it possible to change the drop-down menu behavior for small devices to make it work on click instead of hover? The issue I'm facing is that the sub-menus are appearing outside the root navigation on mobile devices. How can I modify the code to ensure the drop-down menu subs appear inside the root nav and function on click for mobile?
You can find the source code from here
Modified HTML:
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
...
// Dropdown Menu Fade
jQuery(document).ready(function(){
$(".dropdown ").hover(
function() { $('.dropdown-menu', this).stop().fadeIn("fast ");
},
function() { $('.dropdown-menu', this).stop().fadeOut("fast ");
});
});
</script>
</body>
CSS:
.navbar-brand {
padding: 0px;
}
...
@media (max-width: 768px) {
.navbar-default .navbar-nav > li > a {
...
.navbar-collapse.collapse {
...
my code on: <a href="http://jsfiddle.net/jaman7/6wbvk8ed/2/" rel="nofollow">Check this updated code on FIDDLE</a></p>