Sign in


Sign up


Bootstrap Mega Menu


Mega menu dark version MDB Pro component

Bootstrap mega menu is a navigation component which enhance standard navbar features. Extended dropdown contains images and categorized links.

It may contain a smaller version of your sitemap and images.

You can split it into categories and by doing so, enhance the UX of your website.

Examples of Bootstrap mega menu use:

  • Multi-category blog
  • Multi-international company page
  • Traveling page with destination images in the menu

See the following Bootstrap mega menu examples:

                
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark special-color-dark">

    <!-- Navbar brand -->
    <a class="navbar-brand font-up" href="#">Navbar</a>

    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1"
        aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent1">

        <!-- Links -->
        <ul class="navbar-nav mr-auto">

            <li class="nav-item dropdown mega-dropdown active">
                <a class="nav-link dropdown-toggle font-up no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Features</a>
                <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" aria-labelledby="navbarDropdownMenuLink1">
                    <div class="row mx-md-4 mx-1">
                        <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">
                            <h6 class="sub-title font-up font-bold white-text">Featured</h6>
                            <ul class="caret-style pl-0">
                                <li class=""><a class="menu-item mb-0" href="">Lorem ipsum dolor sit amet</a></li>
                                <li class=""><a class="menu-item" href="">Consectetur adipiscing elit</a></li>
                                <li class=""><a class="menu-item" href="">Sed do eiusmod tempor incididunt</a></li>
                                <li class=""><a class="menu-item" href="">Ut labore et dolore magna</a></li>
                                <li class=""><a class="menu-item" href="">Ut enim ad minim veniam</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
                            <h6 class="sub-title font-up font-bold white-text">Related</h6>
                            <ul class="caret-style pl-0">
                                <li class=""><a class="menu-item" href="">Quis nostrud exercitation</a></li>
                                <li class=""><a class="menu-item" href="">Duis aute irure dolor in</a></li>
                                <li class=""><a class="menu-item" href="">Laboris nisi ut aliquip ex ea commodo consequat</a></li>
                                <li class=""><a class="menu-item" href="">Reprehenderit in voluptate</a></li>
                                <li class=""><a class="menu-item" href="">Esse cillum dolore eu fugiat nulla pariatur</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-4">
                            <h6 class="sub-title font-up font-bold white-text">Design</h6>
                            <ul class="caret-style pl-0">
                                <li class=""><a class="menu-item" href="">Excepteur sint occaecat</a></li>
                                <li class=""><a class="menu-item" href="">Sunt in culpa qui officia</a></li>
                                <li class=""><a class="menu-item" href="">Sed ut perspiciatis unde omnis iste natus error</a></li>
                                <li class=""><a class="menu-item" href="">Mollit anim id est laborum</a></li>
                                <li class=""><a class="menu-item" href="">Accusantium doloremque laudantium</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-4 mb-5">
                            <h6 class="sub-title font-up font-bold white-text">Programming</h6>
                            <ul class="caret-style pl-0">
                                <li class=""><a class="menu-item" href="">Totam rem aperiam eaque</a></li>
                                <li class=""><a class="menu-item" href="">Beatae vitae dicta sun</a></li>
                                <li class=""><a class="menu-item" href="">Quae ab illo inventore veritatis et quasi architecto</a></li>
                                <li class=""><a class="menu-item" href="">Nemo enim ipsam voluptatem</a></li>
                                <li class=""><a class="menu-item" href="">Neque porro quisquam est</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown mega-dropdown">
                <a class="nav-link dropdown-toggle font-up no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology</a>
                <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" aria-labelledby="navbarDropdownMenuLink1">
                    <div class="row mx-md-4 mx-1">
                        <div class="col-md-12 col-lg-4 sub-menu my-lg-5 mt-5 mb-4">
                            <h6 class="sub-title font-up font-bold white-text">Featured</h6>
                            <!--Featured image-->
                            <div class="view overlay hm-white-slight mb-3 z-depth-1">
                                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(37).jpg" class="img-fluid" alt="First sample image">
                                <div class="mask flex-center">
                                    <p></p>
                                </div>
                            </div>
                            <h4 class="mb-2"><a class="news-title-2 pl-0" href="">Lorem ipsum dolor sit</a></h4>
                            <p class="font-small font-up 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-lg-4 sub-menu my-lg-5 my-4">
                            <h6 class="sub-title font-up font-bold white-text">Related</h6>
                            <ul class="caret-style pl-0">
                                <li class=""><a class="menu-item" href="">Quis nostrud exercitation</a></li>
                                <li class=""><a class="menu-item" href="">Duis aute irure dolor in</a></li>
                                <li class=""><a class="menu-item" href="">Laboris nisi ut aliquip ex ea commodo consequat</a></li>
                                <li class=""><a class="menu-item" href="">Reprehenderit in voluptate</a></li>
                                <li class=""><a class="menu-item" href="">Esse cillum dolore eu fugiat nulla pariatur</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
                            <h6 class="sub-title font-up font-bold white-text">Design</h6>
                            <ul class="caret-style pl-0">
                                <li class=""><a class="menu-item" href="">Excepteur sint occaecat</a></li>
                                <li class=""><a class="menu-item" href="">Sunt in culpa qui officia</a></li>
                                <li class=""><a class="menu-item" href="">Sed ut perspiciatis unde omnis iste natus error</a></li>
                                <li class=""><a class="menu-item" href="">Mollit anim id est laborum</a></li>
                                <li class=""><a class="menu-item" href="">Accusantium doloremque laudantium</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown mega-dropdown">
                <a class="nav-link dropdown-toggle font-up no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lifestyle</a>
                <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" aria-labelledby="navbarDropdownMenuLink1">
                    <div class="row mx-md-4 mx-1">
                        <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">
                            <h6 class="sub-title font-up font-bold white-text">Featured</h6>
                            <ul class="caret-style pl-0">
                                <li class=""><a class="menu-item mb-0" href="">Lorem ipsum dolor sit amet</a></li>
                                <li class=""><a class="menu-item" href="">Consectetur adipiscing elit</a></li>
                                <li class=""><a class="menu-item" href="">Sed do eiusmod tempor incididunt</a></li>
                                <li class=""><a class="menu-item" href="">Ut labore et dolore magna</a></li>
                                <li class=""><a class="menu-item" href="">Ut enim ad minim veniam</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
                            <h6 class="sub-title font-up font-bold white-text">Related</h6>
                            <!--Featured image-->
                            <div class="view overlay hm-white-slight mb-3 z-depth-1">
                                <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 flex-center">
                                    <p></p>
                                </div>
                            </div>
                            <h4 class="mb-2"><a class="news-title-2 pl-0" href="">Lorem ipsum dolor sit</a></h4>
                            <p class="font-small font-up 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 my-xl-5 mt-4 mb-4">
                            <h6 class="sub-title font-up font-bold white-text">Design</h6>
                            <!--Featured image-->
                            <div class="view overlay hm-white-slight mb-3 z-depth-1">
                                <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 flex-center">
                                    <p></p>
                                </div>
                            </div>
                            <h4 class="mb-2"><a class="news-title-2 pl-0" href="">Ut labore et dolore magna</a></h4>
                            <p class="font-small font-up 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 my-xl-5 mt-4 mb-5">
                            <h6 class="sub-title font-up font-bold white-text">Programming</h6>
                            <ul class="caret-style pl-0">
                                <li class=""><a class="menu-item" href="">Totam rem aperiam eaque</a></li>
                                <li class=""><a class="menu-item" href="">Beatae vitae dicta sun</a></li>
                                <li class=""><a class="menu-item" href="">Quae ab illo inventore veritatis et quasi architecto</a></li>
                                <li class=""><a class="menu-item" href="">Nemo enim ipsam voluptatem</a></li>
                                <li class=""><a class="menu-item" href="">Neque porro quisquam est</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>

        </ul>
        <!-- Links -->

        <!-- Search form -->
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </form>
    </div>
    <!-- Collapsible content -->

</nav>
<!--/.Navbar-->
                
            
                
.navbar .mega-dropdown {
  position: static !important; }

.navbar .dropdown-menu.mega-menu {
  width: 100%;
  border: none;
  border-radius: 0; }
  .navbar .dropdown-menu.mega-menu.v-2 a {
    padding: 15px 10px 10px 35px; }
    .navbar .dropdown-menu.mega-menu.v-2 a.news-title-2 {
      font-weight: 500;
      font-size: 1.1rem;
      line-height: 1.5;
      -webkit-transition: .2s;
      transition: .2s;
      color: #fff !important; }
      .navbar .dropdown-menu.mega-menu.v-2 a.news-title-2:hover {
        color: #d0d6e2 !important; }
  .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul {
    list-style: none; }
    .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul.caret-style li {
      -webkit-transition: .3s;
      transition: .3s; }
      .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul.caret-style li:hover {
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-transition: .3s;
        transition: .3s; }
      .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul.caret-style li a:after {
        font-family: "fontAwesome";
        content: '\f0da';
        position: absolute;
        left: 0.5rem;
        font-size: 12px;
        top: 1rem; }
  .navbar .dropdown-menu.mega-menu.v-2 .sub-menu a.menu-item {
    color: #fff !important; }
    .navbar .dropdown-menu.mega-menu.v-2 .sub-menu a.menu-item:hover {
      color: #fff !important; }
  .navbar .dropdown-menu.mega-menu.v-2 .sub-title {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid; }
  .navbar .dropdown-menu.mega-menu.v-2 .font-small {
    font-size: 0.85rem; }
                
            

Mega menu light version MDB Pro component

                
.navbar .mega-dropdown {
  position: static !important; }

.navbar .dropdown-menu.mega-menu {
  width: 100%;
  border: none;
  border-radius: 0; }
  .navbar .dropdown-menu.mega-menu a {
    padding: 0 0 0 0; }
    .navbar .dropdown-menu.mega-menu a.news-title {
      font-weight: 500;
      font-size: 1.1rem;
      line-height: 1.5;
      -webkit-transition: .2s;
      transition: .2s;
      color: #4f4f4f !important; }
      .navbar .dropdown-menu.mega-menu a.news-title:hover {
        color: #2196f3 !important; }
      .navbar .dropdown-menu.mega-menu a.news-title.smaller {
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.4; }
  .navbar .dropdown-menu.mega-menu .sub-menu a.menu-item {
    color: #4f4f4f !important; }
    .navbar .dropdown-menu.mega-menu .sub-menu a.menu-item:hover {
      color: #4f4f4f !important; }
  .navbar .dropdown-menu.mega-menu .news-single {
    margin-bottom: 1.2rem;
    border-bottom: 1px solid #e0e0e0; }
  .navbar .dropdown-menu.mega-menu .sub-title {
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0; }
  .navbar .dropdown-menu.mega-menu .p-sm {
    padding-bottom: 17px; }
  .navbar .dropdown-menu.mega-menu .m-sm {
    margin-bottom: -5px;
    font-size: 0.85rem;
    color: #2196f3 !important; }
    .navbar .dropdown-menu.mega-menu .m-sm:hover {
      color: #2196f3 !important; }
  .navbar .dropdown-menu.mega-menu .mt-sm {
    margin-top: -3px; }
  .navbar .dropdown-menu.mega-menu .font-small {
    font-size: 0.85rem; }
                
            
                
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light white">

    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
        aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <!-- Links -->
        <ul class="navbar-nav mr-auto">
            <!-- Dropdown -->
            <li class="nav-item dropdown mega-dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News </a>
                <div class="dropdown-menu mega-menu row z-depth-1" aria-labelledby="navbarDropdownMenuLink">
                    <div class="row">
                        <div class="col-md-5 col-xl-3 sub-menu mt-5 mb-5 pl-4">
                            <ol class="list-unstyled mx-4 dark-grey-text">
                                <li class="sub-title font-up mt-sm"><a class="menu-item" href="">Laptops</a></li>
                                <li class="sub-title font-up"><a class="menu-item" href="">Phones</a></li>
                                <li class="sub-title font-up"><a class="menu-item" href="">Lifestyle</a></li>
                                <li class="sub-title font-up"><a class="menu-item" href="">Technology</a></li>
                                <li class="sub-title font-up"><a class="menu-item" href="">Design</a></li>
                            </ol>
                        </div>
                        <div class="col-md-7 col-xl-9">
                            <div class="row">
                                <div class="col-xl-6 mt-5 mb-4 pr-5 clearfix d-none d-md-block">
                                    <h6 class="sub-title p-sm mb-4 font-up font-bold dark-grey-text">Featured</h6>
                                    <!--Featured image-->
                                    <div class="view overlay hm-white-slight pb-3">
                                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(42).jpg" class="img-fluid z-depth-1" alt="First sample image">
                                        <div class="mask flex-center">
                                            <p></p>
                                        </div>
                                    </div>
                                    <h4 class="mb-2"><a class="news-title" href="">Lorem ipsum dolor sit amet, consectetur isum adipisicing elit.</a></h4>
                                    <p class="font-small font-up text-muted">By <a class="m-sm" href="#!">Anna Doe</a> - July 15, 2017</p>
                                </div>
                                <div class="col-xl-6 mt-5 mb-4 pr-5 clearfix d-none d-xl-block">
                                    <h6 class="sub-title p-sm mb-4 font-up font-bold dark-grey-text">Recent</h6>
                                    <div class="news-single">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <!--Image-->
                                                <div class="view overlay hm-white-slight z-depth-1">
                                                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid" alt="Minor sample post image">
                                                    <div class="mask flex-center">
                                                        <p></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <a class="news-title smaller mb-1" href="">Duis aute irure dolor reprehenderit in voluptate.</a>
                                                <p class="font-small font-up text-muted">July 14, 2017</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="news-single">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <!--Image-->
                                                <div class="view overlay hm-white-slight z-depth-1">
                                                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid" alt="Minor sample post image">
                                                    <div class="mask flex-center">
                                                        <p></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <a class="news-title smaller mb-1" href="">Tempore autem reiciendis iste nam dicta.</a>
                                                <p class="font-small font-up text-muted">July 14, 2017</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="news-single">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <!--Image-->
                                                <div class="view overlay hm-white-slight z-depth-1">
                                                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(41).jpg" class="img-fluid" alt="Minor sample post image">
                                                    <div class="mask flex-center">
                                                        <p></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <a class="news-title smaller mb-1" href="">Eligendi dicta sunt amet, totam ea recusandae.</a>
                                                <p class="font-small font-up text-muted">July 14, 2017</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- Links -->

        <!-- Links -->
        <ul class="navbar-nav nav-flex-icons ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
            </li>
        </ul>
        <!-- Links -->

    </div>
    <!-- Collapsible content -->

</nav>
<!--/.Navbar-->
                
            

Mega menu blue version MDB Pro component

                
.navbar .mega-dropdown {
  position: static !important; }

.navbar .dropdown-menu.mega-menu {
  width: 100%;
  border: none;
  border-radius: 0; }
  .navbar .dropdown-menu.mega-menu a {
    padding: 0 0 0 0; }
    .navbar .dropdown-menu.mega-menu a.news-title-2 {
      font-weight: 500;
      font-size: 1.1rem;
      line-height: 1.5;
      -webkit-transition: .2s;
      transition: .2s;
      color: #fff !important; }
      .navbar .dropdown-menu.mega-menu a.news-title-2:hover {
        color: #d0d6e2 !important; }
  .navbar .dropdown-menu.mega-menu .sub-menu a.menu-item-2 {
    color: #fff !important; }
    .navbar .dropdown-menu.mega-menu .sub-menu a.menu-item-2:hover {
      color: #fff !important; }
  .navbar .dropdown-menu.mega-menu .sub-title {
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0; }
  .navbar .dropdown-menu.mega-menu .mt-sm {
    margin-top: -3px; }
  .navbar .dropdown-menu.mega-menu .font-small {
    font-size: 0.85rem; }
                
            
                
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

    <!-- 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">
            <!-- Dropdown -->
            <li class="nav-item dropdown mega-dropdown active">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gadgets </a>
                <div class="dropdown-menu mega-menu row z-depth-1 primary-color-dark" aria-labelledby="navbarDropdownMenuLink2">
                    <div class="row">
                        <div class="col-md-5 col-xl-3 sub-menu mt-5 mb-5">
                            <ol class="list-unstyled ml-4 mr-md-0 mr-4">
                                <li class="sub-title font-up mt-sm"><a class="menu-item-2" href="">Technology</a></li>
                                <li class="sub-title font-up"><a class="menu-item-2" href="">Design</a></li>
                                <li class="sub-title font-up"><a class="menu-item-2" href="">Lifestyle</a></li>
                                <li class="sub-title font-up"><a class="menu-item-2" href="">Laptops</a></li>
                                <li class="sub-title font-up"><a class="menu-item-2" href="">Phones</a></li>
                            </ol>
                        </div>
                        <div class="col-md-7 col-xl-9">
                            <div class="row pr-4">
                                <div class="col-xl-4 mt-5 mb-4 clearfix d-none d-md-block">
                                    <!--Featured image-->
                                    <div class="view overlay hm-white-slight mb-3 z-depth-1">
                                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(41).jpg" class="img-fluid" alt="First sample image">
                                        <div class="mask flex-center">
                                            <p></p>
                                        </div>
                                    </div>
                                    <h4 class="mb-2"><a class="news-title-2" href="">Lorem ipsum dolor sit amet.</a></h4>
                                    <p class="font-small font-up 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-xl-4 mt-5 mb-4 clearfix d-none d-xl-block">
                                    <!--Featured image-->
                                    <div class="view overlay hm-white-slight mb-3 z-depth-1">
                                        <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 flex-center">
                                            <p></p>
                                        </div>
                                    </div>
                                    <h4 class="mb-2"><a class="news-title-2" href="">Neque porro quisquam est.</a></h4>
                                    <p class="font-small font-up 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> 46</p>
                                </div>
                                <div class="col-xl-4 mt-5 mb-4 clearfix d-none d-xl-block">
                                    <!--Featured image-->
                                    <div class="view overlay hm-white-slight mb-3 z-depth-1">
                                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(9).jpg" class="img-fluid" alt="First sample image">
                                        <div class="mask flex-center">
                                            <p></p>
                                        </div>
                                    </div>
                                    <h4 class="mb-2"><a class="news-title-2" href="">Quis autem vel iure reprehit.</a></h4>
                                    <p class="font-small font-up white-text"><i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 15, 2017 / <i class="fa fa-comments-o px-1" aria-hidden="true"></i> 35</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- Links -->

        <!-- Search form -->
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </form>
        <!-- Links -->

    </div>
    <!-- Collapsible content -->

</nav>
<!--/.Navbar-->