<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> <li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Dentures</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li><i class="fa fa-check" aria-hidden="true"></i> Pediatric Dentistry</li> <li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Painless</a></li> <li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Restorative</a></li> <li><a href="#"><i class="fa fa-circle" aria-hidden="true"></i>Preventative</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>Dental Implants</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>Endodontics</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>Dental Surgery</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li><i class="fa fa-check" aria-hidden="true"></i> Periodontics</li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>Root Canal Treatment</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>Tooth Extraction</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>Root Canal Treatment</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>Gum Disease Treatment</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>Dental Emergency</a></li> <li><a href="#"><i class="fa fa-check" aria-hidden="true"></i>Oral and Maxillofacial</a></li> </ul> </li> </ul> </li> <li class="nav-item"> <a href="#" class="nav-link">Our Team</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Gallery</a> </li> <li class="nav-item"> <a href="#" class="nav-link">About Silesia Dental</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Contact Us</a> </li> </ul> </div> </nav>

$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) { background: #0079A6; } &:nth-child(5) { background: #01729C; } &:last-child { background: #00688D; } } li { &:first-child { a { border-left: 0; border-radius: 3px 0 0 3px; } } &:last-child { a { border-right: 0; border-radius: 0 3px 3px 0; } } } } } .navbar-nav { .nav-link { color: $color_white; } } .menu-large { position: static !important; } .megamenu { padding: 20px 0px; width: 100%; li { color: $color_white; ul { padding: 0; margin: 0; li { list-style: none; a { display: block; margin-top: 30px; clear: both; font-weight: normal; line-height: 1.428571429; color: $color_white; white-space: normal; } } } } } .dropdown-menu { background: #179CD3; } @media (max-width: 768px) { .navbar .nav > li { display: block; width: 100%; float: none; text-align: center; } .navbar-nav .nav-item + .nav-item { margin-left: 0; } .megamenu { margin-left: 0; margin-right: 0; li { margin-bottom: 30px; &:last-child { margin-bottom: 0; } } } .open { .dropdown-menu { color: $color_white; } } }

// Dropdown Menu Fade jQuery(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop().fadeIn("fast"); }, function() { $('.dropdown-menu', this).stop().fadeOut("fast"); }); });