"Bootstrap Advanced Navigation"
Bootstrap 3.3.0 Snippet by BharathKurapati

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--Its Supports bootstrap 3.3.7 also-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<nav class="navbar navbar-mega-black-red no-radius" id="main_menubar">
<div class="container-fluid">
<!-- Logo and toggle mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar_mobile"> <span class="toggle-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
<a class="navbar-logo" href="index.html"> Mega Navigator</a>
</div>
<div class="collapse navbar-collapse" id="navbar_mobile">
<ul class="nav navbar-nav navbar-left">
<!-- dropdown default -->
<li class="short-dropdown dropdown-onhover">
<a data-toggle="dropdown" href="" class="dropdown-toggle" aria-expanded="true">
<i class="fa fa-bars"></i> <span class="hidden-sm">Menu</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-right-onhover no-fix">
<!-- Menu item with submenu -->
<a href="javascript:void(0);" data-toggle="collapse" class="dropdown-toggle collapsed" data-target="#id_1"> Right Menu</a>
<!-- start submenu -->
<ul class="dropdown-menu collapse dropdown-onhover" id="id_1">
<li class="dropdown-right-onhover">
<!-- Menu item with Sub Menu -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html, body {
width: 100%;
height: 100%;
}
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}/* Custom Button Styles */
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.btn-light {
border-radius: 0;
color: #333;
background-color: rgb(255,255,255);
}
.btn-light:hover, .btn-light:focus, .btn-light:active {
color: #333;
background-color: rgba(255,255,255,0.8);
}
#sidebar-wrapper.active {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
jQuery(document).ready(function(e) {
jQuery('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
e.preventDefault();
jQuery('a[data-toggle="tab"]').each(function() {
jQuery(this).parent('li').removeClass('active');
});
})
jQuery('.carousel').carousel();
});
var navHeight = $('#main_menubar').offset().top;
FixMegamenubar(navHeight);
$(window).bind('scroll', function() {FixMegamenubar(navHeight);});
function FixMegamenubar(navHeight) {
if (!$('#main_menubar').hasClass('navbar-fixed-bottom')) {
if ($(window).scrollTop() > navHeight) {
$('#main_menubar').addClass('navbar-fixed-top')
$('body').css({'margin-top': $('#main_menubar').height()+'px'});
if ($('#main_menubar').parent('div').hasClass('container')) $('#main_menubar').children('div').addClass('container').removeClass('container-fluid');
else if ($('#main_menubar').parent('div').hasClass('container-fluid')) $('#main_menubar').children('div').addClass('container-fluid').removeClass('container');
}
else {
$('#main_menubar').removeClass('navbar-fixed-top');
$('#main_menubar').children('div').addClass('container-fluid').removeClass('container');
$('body').css({'margin-top': ''});
}
}
}
$( window ).load(function() {
$(document).on('click', '.navbar .dropdown-menu', function(e) {e.stopPropagation();});
});
$(document).ready(function() {
$(".toTop").css("display", "none");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: