"MegaBoot"
Bootstrap 4.0.0 Snippet by kmsharif

Post to Facebook Tweet this

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/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar bg-faded" role="navigation" style="padding: 0px;">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar">
☰
</button>
<div class="collapse navbar-toggleable-sm" id="collapsing-navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item dropdown menu-large">
<a class="nav-link" data-toggle="dropdown" href="#">Services</a>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3">
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i> Orthodontics</li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Invisalign</a></li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Incognito Lingual Services</a></li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Damon System</a></li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Six Month Smiles</a></li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Ceramic & Metal Braces</a></li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>SureSmile Technology</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i> Cosmetic/Aestheric Dentistry</li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Zoom Teeth Whitening</a></li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Veneers/Non Prep Veneers</a></li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Fillings</a></li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Crowns/Bridges</a></li>
<li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Aesthetic Inlays/Onlays</a></li>
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
$color_white: #fff;
.fa-check {
color: $color_white;
margin-left: .8em;
}
.fa-circle {
color: $color_white;
font-size: .5em;
padding-right: 1em;
}
.navbar {
.navbar-inner {
padding: 0;
}
.nav {
margin: 0;
display: table;
width: 100%;
>li {
display: table-cell;
width: 1%;
float: none;
text-align: center;
a {
line-height: 2.5;
}
&:nth-child(1) {
background: #00ADEF;
}
&:nth-child(2) {
background: #009EDB;
}
&:nth-child(3) {
background: #0086B9;
}
&:nth-child(4) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
// Dropdown Menu Fade
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).stop().fadeIn("fast");
},
function() { $('.dropdown-menu', this).stop().fadeOut("fast");
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Dashboard PRO

Questions / Comments: