"Bootstrap 4 Mega Menu Cadastro3"
Bootstrap 4.1.1 Snippet by adriano3429

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light sticky-top"> <div class="container"> <a class="navbar-brand" href="#">Mega Menu</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobile_nav" aria-controls="mobile_nav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mobile_nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0 float-md-right"> </ul> <ul class="navbar-nav navbar-light"> <li class="nav-item"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">About Us</a></li> <li class="nav-item dmenu dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu sm-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Software Development</a> <a class="dropdown-item" href="#">Web Designing & Development</a> <a class="dropdown-item" href="#">Mobile Application</a> <a class="dropdown-item" href="#">Business Solutions & Business Process</a> <a class="dropdown-item" href="#">Digital Marketing & SEO Services</a> <a class="dropdown-item" href="#">Web Hosting & Maintenance</a> <a class="dropdown-item" href="#">Cyber Security</a> <a class="dropdown-item" href="#">Block Chain Implementation</a> <a class="dropdown-item" href="#">Big Data</a> </div> </li> <!--========--> <li class="nav-item dropdown megamenu-li dmenu"> <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All Services</a> <div class="dropdown-menu megamenu sm-menu border-top" aria-labelledby="dropdown01"> <div class="row"> <div class="col-sm-6 col-lg-3 border-right mb-4"> <h6>Ecommerce</h6> <a class="dropdown-item" href="#"><i class="fab fa-magento"></i> Magento Development</a> <a class="dropdown-item" href="#"><i class="fab fa-magento"></i> Magento 2 Migration</a> <a class="dropdown-item" href="#"><i class="fab fa-magento"></i> Odoo ERP</a> <a class="dropdown-item" href="#"><i class="fab fa-magento"></i> Mobile Commerce</a> <a class="dropdown-item" href="#"><i class="fab fa-magento"></i> CRM for Commerce</a> </div> <div class="col-sm-6 col-lg-3 border-right mb-4"> <h6>LAMP Technology</h6> <a class="dropdown-item" href="#"><i class="fab fa-php"></i> PHP Website Development</a> <a class="dropdown-item" href="#"><i class="fas fa-circle"></i> Phalcon Development</a> <a class="dropdown-item" href="#"><i class="fab fa-laravel"></i> Laravel Development</a> <a class="dropdown-item" href="#"><i class="fab fa-wordpress-simple"></i> WordPress Development</a> <a class="dropdown-item" href="#"><i class="fab fa-php"></i> Symfony Development</a> </div> <div class="col-sm-6 col-lg-3 border-right mb-4"> <h6>Mobile</h6> <a class="dropdown-item" href="#"><i class="fab fa-apple"></i> iPhone App Development</a> <a class="dropdown-item" href="#"><i class="fab fa-android"></i> Android App Development</a> <a class="dropdown-item" href="#"><i class="fas fa-mobile-alt"></i> Phone Gap App Development</a> <a class="dropdown-item" href="#"><i class="fas fa-tablet-alt"></i> Hybrid App Development</a> <a class="dropdown-item" href="#"><i class="fas fa-mobile-alt"></i> Ionic Development</a> <a class="dropdown-item" href="#"><i class="fas fa-tablet-alt"></i> React Native Development</a> <a class="dropdown-item" href="#"><i class="fas fa-mobile-alt"></i> Xamarin App Development</a> </div> <div class="col-sm-6 col-lg-3 mb-4"> <h6>Node.js & MongoDB</h6> <a class="dropdown-item" href="#"><i class="fas fa-cubes"></i> Full Stack Development</a> <a class="dropdown-item" href="#"><i class="fas fa-cube"></i> MEAN Stack</a> <a class="dropdown-item" href="#"><i class="fab fa-angular"></i> AngularJS</a> <a class="dropdown-item" href="#"><i class="fab fa-node-js"></i> Node.JS Development</a> <a class="dropdown-item" href="#"><i class="fas fa-leaf fa-rotate-90"></i> MongoDB Development</a> </div> </div> <div class="row"> <div class="col-sm-6 col-lg-3 border-right mb-4"> <h6>Microsoft Technology</h6> <a class="dropdown-item" href="#"><i class="fab fa-windows"></i> Microsoft App Development</a> <a class="dropdown-item" href="#"><i class="fab fa-windows"></i> MS Desktop App Development</a> <a class="dropdown-item" href="#"><i class="fab fa-windows"></i> SharePoint Development</a> <a class="dropdown-item" href="#"><i class="fab fa-windows"></i> ASP.NET Development</a> <a class="dropdown-item" href="#"><i class="fab fa-windows"></i> CMS Development</a> </div> <div class="col-sm-6 col-lg-3 border-right mb-4"> <h6>Cloud Services</h6> <a class="dropdown-item" href="#"><i class="fas fa-cloud"></i> DevOps</a> <a class="dropdown-item" href="#"><i class="fab fa-amazon"></i> Amazon Web Services</a> <a class="dropdown-item" href="#"><i class="fab fa-windows"></i> Azure Cloud Service</a> <a class="dropdown-item" href="#"><i class="fab fa-google"></i> Google App Engine Services</a> </div> <div class="col-sm-6 col-lg-3 border-right mb-4"> <h6>Enterprise Services</h6> <a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> Augmented Reality</a> <a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> CRM</a> <a class="dropdown-item" href="#"><i class="fab fa-buromobelexperte"></i> Enterprise Mobility Services</a> <a class="dropdown-item" href="#"><i class="fas fa-th-large"></i> Blockchain Services</a> <a class="dropdown-item" href="#"><i class="fas fa-briefcase"></i> Business Intelligence</a> </div> <div class="col-sm-6 col-lg-3 mb-4"> <h6>Digital Marketing</h6> <a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> Digital Marketing</a> <a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> PPC Management Services</a> <a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> E-commerce SEO Services</a> <a class="dropdown-item" href="#"><i class="fas fa-laptop"></i> Conversion Rate Optimization</a> </div> </div> </div> </li> <!--=========--> <li class="nav-item"><a class="nav-link" href="<?php echo siteURL;?>portfolio.php">Portfolio</a></li> <li class="nav-item"><a class="nav-link" href="<?php echo siteURL;?>career.php">Careers</a></li> <li class="nav-item"><a class="nav-link" href="<?php echo siteURL;?>contact-us.php">Sair</a></li> </ul> </div> </div> </nav> <section id="about-us" class="py-5"> <div class="container"> <div class="row"> <!--left sidebar--> <div class="col-md-3 pr-md-4"> <div class="sidebar-left"> <!--sidebar menu--> <ul class="list-unstyled sidebar-menu pl-md-2 pr-md-0"> <li> <a class="sidebar-item active d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Dashboard <span class="fas fa-tachometer-alt"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Profile <span class="fas fa-user"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Post <span class="fas fa-copy"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Comment <span class="side-notif" title="1 new comment">1</span> <span class="fas fa-comment"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Messages <span class="side-notif" title="1 new messages">1</span> <span class="fas fa-envelope"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Favorite <span class="fas fa-heart"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Setting <span class="fas fa-cog"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Sign out <span class="fas fa-sign-out-alt"></span> </a> </li> </ul> </div> </div> <!--Content--> <div class="col-md-9"> <div class="dashboard-area"> <div class="row"> <div class="col-12"> <div class="mb-3 bg-dark"> <div class="row"> <div class="col-12"> <a class="position-absolute ml-3 mt-3 text-white" href="setting.html" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Edit cover images"><i class="fas fa-cog"></i></a> <div class="row"> <div class="col-md-6 ml-auto mr-auto"> <div class="profiles p-3 my-4 rounded text-center shadow-sm"> <div class="avatars"> <a href="setting.html"> <img src="https://demo.bootstrap.news/bootnews/assets/img/avatar/avatar1.png" alt="Circle Image" class="avatar-lg rounded-circle img-fluid" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Edit avatar images"> </a> </div> <div class="names"> <h3 class="title text-light">@jenifer</h3> <a href="#" class="btn btn-link btn-facebook"><i class="fab fa-facebook"></i></a> <a href="#" class="btn btn-link btn-twitter"><i class="fab fa-twitter"></i></a> <a href="#" class="btn btn-link btn-gplus"><i class="fab fa-google-plus"></i></a> <a href="#" class="btn btn-link btn-instagram"><i class="fab fa-instagram"></i></a> <a href="#" class="btn btn-link btn-youtube"><i class="fab fa-youtube"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active show" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Statistic</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Latest post</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="row"> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-warning text-center"> <i class="fas fa-copy"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Article</p> 112 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-info text-center" title="1 new comment"> <div class="notif">1</div> <i class="fas fa-comment"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Comments</p> 454 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-danger text-center"> <i class="fas fa-heart"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Favorite</p> 56 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-twitter text-center" title="1 new messages"> <div class="notif">1</div> <i class="fas fa-envelope"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Messages</p> 23 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-facebook text-center"> <i class="fas fa-star"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Following</p> 112 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-success text-center"> <i class="fas fa-users"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Follower</p> 1567 </div> </div> </div> </div> </div> </a> </div> </div> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <div class="p-3 border mb-3"> <a class="position-absolute" style="right: 25px" href="setting.html" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Edit profile"><i class="fas fa-cog"></i></a> <h3>Jenifer Tan</h3> <p><b>Jobs:</b> Writter</p> <p><b>About:</b> Hello my name is Jenifer, My passion is writting. I hope you enjoy with my article.</p> <p><b>Address:</b> Street 12 vo 05, California, United States</p> <p><b>Phone:</b> +1 987654321</p> </div> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <div class="p-3 border mb-3"> <h5>Recently Published</h5> <div class="row"> <div class="col-12"> <ul class="list-unstyled statistics"> <li> <span class="text-primary">Oct 20</span> <a class="h6" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Toyota Sienna rates marginal in passenger-side overlap crash test</a> </li> <li> <span class="text-primary">Oct 12</span> <a class="h6" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Ford reveals autonomous vehicle philosophies, priorities</a> </li> <li> <span class="text-primary">Oct 7</span> <a class="h6" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Offer Hints to How Dogs Became Domesticated</a> </li> <li> <span class="text-primary">Oct 6</span> <a class="h6" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Consumer apprehension grows over autonomous tech, study says</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <div class="container"> <div class="row"> <div class="col-md-12"> <div style="height: 2em"></div> <div class="card"> <div class="card-header"> <h5>Atomic Bicycle V1</h5> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" id="stat-1-tab" data-toggle="tab" href="#stat-1" role="tab" aria-controls="stat-1" aria-selected="true">Statistics</a> </li> <li class="nav-item"> <a class="nav-link"id="task-1-tab" data-toggle="tab" href="#task-1" role="tab" aria-controls="task-1" aria-selected="false">Tasks</a> </li> <li class="nav-item"> <a class="nav-link"id="team-1-tab" data-toggle="tab" href="#team-1" role="tab" aria-controls="team-1" aria-selected="false">Team</a> </li> </ul> </div> <div class="card-body"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="stat-1" role="tabpanel" aria-labelledby="stat-1-tab"> <div class="row"> <div class="col-md-12"> <table class="table table-bordered table-striped"> <thead> <tr class="table"> <th scope="col">Today date</td> <th scope="col">Deadline</td> <th scope="col">Time left</td> <th scope="col">Time needed</td> </tr> </thead> <tbody> <tr> <td>17/07/2019</td> <td>27/09/2019</td> <td>52 days</td> <td>45 days <span class="badge badge-pill badge-success">- 7d</span></td> </tr> </tbody> </table> </div> </div> <div class="row"> <div class="col-md-4"> <div class="card"> <div class="card-body"> <span><strong style="font-size: 2em" class="card-title">28</strong></span> <small class="card-text">Agile Velocity <span class="badge badge-pill badge-success">+ 2</span></small> </div> <div class="card-footer"> <button class="btn btn-link btn-sm">Burndown Chart</button> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <span><strong style="font-size: 2em" class="card-title">74</strong></span> <small class="card-text">Unit test <span class="badge badge-pill badge-success">OK</span></small> </div> <div class="card-footer"> <button class="btn btn-link btn-sm">Test report</button> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <span><strong style="font-size: 2em" class="card-title">7</strong></span> <small class="card-text">Unit test <span class="badge badge-pill badge-danger">KO</span></small> </div> <div class="card-footer"> <button class="btn btn-link btn-sm">Test resport</button> </div> </div> </div> </div> <div class="spacer"></div> <div class="row"> <div class="col-md-12"> <label>Completion Percentage :</label> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div> </div> </div> </div> <div class="spacer"></div> <div class="row"> <div class="col-md-12"> <label>Man-days used percentage : <span class="badge badge-pill badge-warning">+ 5%</span></label> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 5%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100">5%</div> </div> </div> </div> </div> <div class="tab-pane fade" id="task-1" role="tabpanel" aria-labelledby="task-1-tab"> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Desc</th> <th scope="col">State</th> <th scope="col">Actions</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Conception</td> <td>Make studies on UX design, technology needs and budget.</td> <td><span class="badge badge-pill badge-success">Ended</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> <tr> <th scope="row">2</th> <td>Piece developement</td> <td>Construct motor, wheels, lights ...</td> <td><span class="badge badge-pill badge-success">Ended</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> <tr> <th scope="row">3</th> <td>Assembly</td> <td>Make the bicycle with pieces.</td> <td><span class="badge badge-pill badge-warning">Work in progress</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> <tr> <th scope="row">4</th> <td>Tests</td> <td>Verify product with the Testing plan.</td> <td><span class="badge badge-pill badge-primary">To do</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> <tr> <th scope="row">5</th> <td>Sending</td> <td>Send the bicycle</td> <td><span class="badge badge-pill badge-primary">To do</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="team-1" role="tabpanel" aria-labelledby="team-1-tab"> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Type</th> <th scope="col">Actions</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark Otto</td> <td><span class="badge badge-pill badge-primary">UX/UI Designer</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> <tr> <th scope="row">2</th> <td>Jhon Doe</td> <td><span class="badge badge-pill badge-warning">Engineer</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> <tr> <th scope="row">3</th> <td>Thibault Leveau</td> <td><span class="badge badge-pill badge-warning">Engineer</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> <tr> <th scope="row">4</th> <td>Jean Zobbix</td> <td><span class="badge badge-pill badge-primary">UX/UI Designer</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> <tr> <th scope="row">5</th> <td>Thibeauf Dupont</td> <td><span class="badge badge-pill badge-danger">Project Manager</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div>
.navbar{ background: black; padding-top: 0; padding-bottom: 0; box-shadow: 1px 3px 4px 0 #adadad33; } .navbar-light .navbar-brand { color: white; } .navbar-light .navbar-nav .nav-link { color: white; } .navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { color: #1ebdc2; } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: #fff; } .navbar-light .navbar-nav .nav-link{ padding-top: 22px; padding-bottom: 22px; transition: 0.3s; padding-left: 24px; padding-right: 24px; font-size: 14px; } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{ background: #1ebdc2; transition: 0.3s; } .dropdown-item:focus, .dropdown-item:hover { color: #fff; text-decoration: none; background-color: #1ebdc2 !important; } .sm-menu{ border-radius: 0px; border: 0px; top: 97%; box-shadow: rgba(173, 173, 173, 0.2) 1px 3px 4px 0px; } .dropdown-item { color: #3c3c3c; font-size: 14px; } .dropdown-item.active, .dropdown-item:active { color: #fff; text-decoration: none; background-color: #2196F3; } .navbar-toggler{ outline: none !important; } .navbar-tog{ color: #1ebdc2; } .megamenu-li { position: static; } .megamenu { position: absolute; width: 100%; left: 0; right: 0; padding: 15px; } .megamenu h6{ margin-left: 21px; } .megamenu i{ width: 20px; } .text-facebook, .hover-facebook-text:hover i, .hover-facebook a:hover i { color: #3b5998; } .bg-facebook, .btn-facebook { background-color: #3b5998; color: #fff; } .text-twitter, .hover-twitter-text:hover i, .hover-twitter a:hover i { color: #00aced; } .bg-twitter, .btn-twitter { background-color: #00aced; color: #fff; } .text-instagram, .hover-instagram-text:hover i, .hover-instagram a:hover i { color: #b300ad; } .bg-instagram, .btn-instagram { background-color: #b300ad; color: #fff; } .text-youtube, .hover-youtube-text:hover i, .hover-youtube a:hover i { color: #bd0000; } .bg-youtube, .btn-youtube { background-color: #bd0000; color: #fff; } .text-gplus, .hover-gplus-text:hover i, .hover-gplus a:hover i { color: #eb5e4c; } .bg-gplus, .btn-gplus { background-color: #eb5e4c; color: #fff; } .text-vimeo, .hover-vimeo-text:hover i, .hover-vimeo a:hover i { color: #35c6ea; } .bg-vimeo, .btn-vimeo { background-color: #35c6ea; color: #fff; } .text-envelope, .hover-envelope-text:hover i, .hover-envelope a:hover i { color: #faa33d; } .bg-envelope, .btn-envelope { background-color: #faa33d; color: #fff; } .text-linkedin, .hover-linkedin-text:hover i, .hover-linkedin a:hover i { color: #6697ff; } .bg-linkedin, .btn-linkedin { background-color: #6697ff; color: #fff; } .text-telegram, .hover-telegram-text:hover i, .hover-telegram a:hover i { color: #30a8dc; } .bg-telegram, .btn-telegram { background-color: #30a8dc; color: #fff; } .text-pinterest, .hover-pinterest-text:hover i, .hover-pinterest a:hover i { color: #bd081b; } .bg-pinterest, .btn-pinterest { background-color: #bd081b; color: #fff; } .black a { color: #000; } .post-content ul { color: #474b5f; } .white a { color: #fff; } /*------------------------------------ Member area ------------------------------------*/ .sidebar-item.active, .sidebar-item:hover { background-color: #fff; border: 1px solid #e6e7e9; border-right: 0; margin-right: -1px; } .sidebar-menu { border-bottom: 1px solid #e6e7e9; border-top: 1px solid #e6e7e9; border-right: 1px solid #e6e7e9; padding-bottom: 1rem; padding-top: 1rem; background-color: #f4f4f4; } .sidebar-item { position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: 0.5rem; border: 1px solid transparent; } .sidebar-item.active:hover { background-color: #fff; } .card .icon-big { font-size: 3rem; } .card .icon-big .notif { position: absolute; min-width: 25px; border-radius: 5rem; font-size: 1rem; background: #dc3545; color: #fff; } .card .numbers { text-align: right; } .card .numbers p { font-size: 1rem; margin: 0; } .card .footer { padding: 0; line-height: 30px; } .side-notif { padding-left: 7px; padding-right: 7px; font-size: 0.8rem; border-radius: 5rem; background-color: #dc3545; color: #fff; } .statistics li { padding: 0.25rem 0; } .member-item:hover .card { background-color: #f4f4f4; } .table-striped tbody tr:nth-of-type(odd) { background-color: #f4f4f4; } @media (max-width: 767.98px) { .sidebar-item.active, .sidebar-item:hover { border-right: 1px solid #e6e7e9; margin-left: 0.25rem; margin-right: 0.25rem; } } .spacer { height: 1em; }
$(document).ready(function () { $('.navbar-light .dmenu').hover(function () { $(this).find('.sm-menu').first().stop(true, true).slideDown(150); }, function () { $(this).find('.sm-menu').first().stop(true, true).slideUp(105) }); }); $(document).ready(function() { $(".megamenu").on("click", function(e) { e.stopPropagation(); }); });

Related: See More


Questions / Comments: