<nav class="navbar navbar-expand-lg navbar-dark special-color-dark"> <!-- Navbar brand --> <a class="navbar-brand text-uppercase" href="#">Navbar</a> <!-- Collapse button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- Collapsible content --> <div class="collapse navbar-collapse" id="navbarSupportedContent2"> <!-- Links --> <ul class="navbar-nav mr-auto"> <!-- Features --> <li class="nav-item dropdown mega-dropdown active"> <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Features <span class="sr-only">(current)</span> </a> <div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink2"> <div class="row"> <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6> <ul class="list-unstyled"> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam </a> </li> </ul> </div> <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6> <ul class="list-unstyled"> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur </a> </li> </ul> </div> <div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6> <ul class="list-unstyled"> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium </a> </li> </ul> </div> <div class="col-md-6 col-xl-3 sub-menu mb-0"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6> <ul class="list-unstyled"> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi architecto </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est </a> </li> </ul> </div> </div> </div> </li> <!-- Technology --> <li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology</a> <div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink3"> <div class="row"> <div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6> <!--Featured image--> <a href="#!" class="view overlay z-depth-1 p-0 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).jpg" class="img-fluid" alt="First sample image"> <div class="mask rgba-white-slight"></div> </a> <a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a> <p class="font-small text-uppercase white-text"> <i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o px-1" aria-hidden="true"></i> 20 </p> </div> <div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6> <ul class="list-unstyled"> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur </a> </li> </ul> </div> <div class="col-md-6 col-xl-4 sub-menu mb-0"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6> <ul class="list-unstyled"> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium </a> </li> </ul> </div> </div> </div> </li> <!-- Lifestyle --> <li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lifestyle</a> <div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink4"> <div class="row"> <div class="col-md-6 col-xl-3 sub-menu mb-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6> <ul class="list-unstyled"> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam </a> </li> </ul> </div> <div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6> <!--Featured image--> <a href="#!" class="view overlay z-depth-1 p-0 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid" alt="First sample image"> <div class="mask rgba-white-slight"></div> </a> <a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a> <p class="font-small text-uppercase white-text"> <i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o px-1" aria-hidden="true"></i> 20 </p> </div> <div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6> <!--Featured image--> <a href="#!" class="view overlay z-depth-1 p-0 mb-2"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid" alt="First sample image"> <div class="mask rgba-white-slight"></div> </a> <a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a> <p class="font-small text-uppercase white-text"> <i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i class="fa fa-comments-o px-1" aria-hidden="true"></i> 25 </p> </div> <div class="col-md-6 col-xl-3 sub-menu mb-0"> <h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6> <ul class="list-unstyled"> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi architecto </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem </a> </li> <li> <a class="menu-item pl-0" href="#!"> <i class="fa fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est </a> </li> </ul> </div> </div> </div> </li> </ul> <!-- Links --> <!-- Search form --> <form class="form-inline"> <div class="md-form my-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> </div> </form> </div> <!-- Collapsible content --> </nav>

---