<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="container-fluid px-0"> <nav class="navbar navbar-expand-md navbar-light bg-white p-0"> <a class="navbar-brand mr-4" href="#"><strong>yatendra</strong></a> <button class="navbar-toggler mr-3" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<span class="fa fa-angle-down"></span></a> <div class="dropdown-menu" id="dropdown-menu1" aria-labelledby="navbarDropdown1"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-shopping-cart"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">WearCMS</h6> <small class="text-muted">For your project</small> </a> </div> </div> </div> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-gamepad"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">Game+</h6> <small class="text-muted">Monetization of games</small> </a> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-video-camera"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">Streetcam</h6> <small class="text-muted">Keep track all year</small> </a> </div> </div> </div> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-comment"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">Teamne</h6> <small class="text-muted">Teamwork</small> </a> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-briefcase"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">Prospec</h6> <small class="text-muted">Solutions for your business</small> </a> </div> </div> </div> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-bolt"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">Booster</h6> <small class="text-muted">Increase engagement</small> </a> </div> </div> </div> </div> </div> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Resources<span class="fa fa-angle-down"></span></a> <div class="dropdown-menu" id="dropdown-menu2" aria-labelledby="navbarDropdown2"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-folder"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">WhitePaper</h6> <small class="text-muted">Marketing and report</small> </a> </div> </div> </div> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-question"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">FAQs</h6> <small class="text-muted">Qs and answers</small> </a> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-calculator"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">Tools</h6> <small class="text-muted">All tools</small> </a> </div> </div> </div> <div class="col-md-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-paper-plane"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">Success Stories</h6> <small class="text-muted">Experiences</small> </a> </div> </div> </div> </div> </div> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Customers<span class="fa fa-angle-down"></span></a> <div class="dropdown-menu" id="dropdown-menu3" aria-labelledby="navbarDropdown3"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-feed"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">Feedback</h6> <small class="text-muted">Opinions, complaints</small> </a> </div> </div> </div> <div class="col-lg-6"> <div class="row d-flex tab"> <div class="fa-icon text-center"> <span class="fa fa-question"></span> </div> <div class="d-flex flex-column"> <a class="dropdown-item" href="#"> <h6 class="mb-0">FAQs</h6> <small class="text-muted">Qs and answers</small> </a> </div> </div> </div> </div> </div> </div> </li> </ul> </div> </nav> </div>

body { background-color: #D1C4E9; overflow-x: hidden } .bg-white { background-color: #fff } .navbar-brand { padding: 23.5px 20px; font-size: 18px } .navbar-nav { width: 100% } .nav-item { padding: 20px 8px; margin: 0px 3px; text-align: center; border-radius: 5px; font-size: 16px; color: grey; position: static } .nav-item.active { color: #EF5350 } .nav-item:hover { color: #EF5350 } a { color: inherit !important } .nav-link { padding: 5px } .navbar-collapse.collapse.in { display: block !important } .fa-angle-down { padding-left: 10px } .fa-icon { font-size: 30px; color: #fff; background-color: pink; margin: 2px 10px 5px 0px; border-radius: 10px; width: 50px; height: 50px } .dropdown-menu { margin-top: 0px; border: none; background-color: #F3E5F5; padding: 50px 50px 30px 50px } #dropdown-menu1 { position: absolute; left: 165px } #dropdown-menu2 { position: absolute; left: 285px } #dropdown-menu3 { position: absolute; left: 415px } .tab { margin-bottom: 20px; width: 230px } .tab:hover { color: #E91E63 !important } .dropdown-item { padding: 0px } .dropdown-item:hover { background-color: inherit } @media (max-width: 767px) { .nav-item { width: 100%; text-align: left; padding-left: 10px } .dropdown-menu { left: 0 !important; position: relative !important; padding: 20px } }