Mega Menu Responsive

mega menu responsive

Sophia Jain

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mega Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
 <nav id="main-menu" class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">BRAND LOGO</a>
                </div>

<div class="collapse navbar-collapse navbar-right">
                    <ul class="nav navbar-nav">
                        <li class="scroll active"><a href="#">HOME</a></li>
                        <li class="scroll"><a href="#">CONTACT US</a></li>
                        
                        <li class="dropdown mega-dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">SERVICES<span class="caret"></span></a>              
                            <ul class="dropdown-menu mega-dropdown-menu">
                                <li class="col-sm-4">
                                    <ul>
                                        <li class="dropdown-header">Features</li>
                                        <li><a href="#">Auto Carousel</a></li>
                                        <li><a href="#">Carousel Control</a></li>
                                        <li><a href="#">Right Navigation</a></li>
                                        <li><a href="#">Four Columns Grid</a></li>
                        </ul>
                    </li>
                    <li class="col-sm-4">
                        <ul>
                            <li class="dropdown-header">Plus</li>
                            <li><a href="#">Navbar Inverse</a></li>
                            <li><a href="#">Right Elements</a></li>
                            <li><a href="#">Coloured Headers</a></li>                            
                            <li><a href="#">Primary Buttons</a></li>                          
                        </ul>
                    </li>
                    <li class="col-sm-4">
                        <ul>
                            <li class="dropdown-header">Much more</li>
                            <li><a href="#">Easy to Customize</a></li>
                            <li><a href="#">Calls to action</a></li>
                            <li><a href="#">Custom Fonts</a></li>
                            <li><a href="#">Slide down</a></li>                         
                        </ul>
                    </li>
                </ul>               
            </li>
            <li class="scroll"><a href="#">CONTACT US </a></li>
            <li class="scroll"><a href="#">WHATS NEW</a></li>                        
        </ul>
    </div>
</div>
</nav>
<br><br><br><br><br><br>
<h2 class="text-center"><strong>Create Mega Menu</strong></h2>
</body>
</html>

body{
   background-image: radial-gradient(circle, #f48cd0, #e080d8, #c577e2, #a071ed, #686ff6);
}
.navbar .navbar-default {
  border: 0;
  border-radius: 0;
  margin-bottom: 0; 
  background:#fff;
}
.navbar .navbar-default .navbar-toggle {
  margin-top: 32px;
}
.navbar .navbar-default .navbar-brand {
  height: auto;
  padding: 22px 15px 15px;
}
  /*Mega Menu Css*/

.mega-dropdown {
    position: static !important;
  }
  .mega-dropdown-menu {
    padding: 0;
    width: 50%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    
  }
  @media screen and (max-width: 970px){
    .mega-dropdown-menu {
     padding: 0;
     width: 70%;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
    }
  }

.mega-dropdown-menu > li > ul {
    padding: 0;
    margin: 0;
  }
  .mega-dropdown-menu > li > ul > li {
    list-style: none;
  }
  .mega-dropdown-menu > li > ul > li > a {
    display: block;
    padding: 10px 5px;
    border-top: 1px solid #ca7167;
    color: #4a4a4a;
    /*font-family: RadikalW01_Black_bold;*/
    /*text-transform: uppercase;*/
  }
  .mega-dropdown-menu > li ul > li > a:hover,
  .mega-dropdown-menu > li ul > li > a:focus {
    text-decoration: none;
  }
  .mega-dropdown-menu .dropdown-header {
    font-size: 18px;
    color: #b80303;
    padding: 0;
    line-height: 30px;
  }
  .navbar-default .navbar-nav>.open>a, 
  .navbar-default .navbar-nav>.open>a:focus, 
  .navbar-default .navbar-nav>.open>a:hover{
      color: #f45541;    
      background-color: rgba(231, 231, 231, 0);
      
  }
  /*End Mega Menu Css*/
  @media only screen and (min-width: 768px) {
    #main-menu.navbar-default {
      background: #eee;
      -webkit-box-shadow: 0 0 10px #000;
      -moz-box-shadow: 0 0 10px #000;
      box-shadow: 0 0 10px #000;
    }

#main-menu.navbar-default .navbar-nav > li > a {
      padding-top: 5px;
      padding-bottom: 5px;
      border-radius: 20px;
      margin:27px 0;
      font-size:16px;
      font-family: 'Roboto-regular'; 
      font-weight:normal;
    }
    #main-menu.navbar-default .navbar-nav > li.active > a,
    #main-menu.navbar-default .navbar-nav > li.open > a,
    #main-menu.navbar-default .navbar-nav > li:hover > a {
      background: transparent;
      border-top: 0 solid #b80303; 
      color:#4c4c4c;
    }
    #main-menu.navbar-default .dropdown-menu {
      padding: 0 5px;
      min-width: 220px;
      margin-right: 10px;
      background-color: rgba(234, 235, 241, 0.9);
      border: 0;
      border-radius: 0;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }
    #main-menu.navbar-default .dropdown-menu > li {
      /*border-left: 3px solid transparent;*/
      /*margin-left: -20px;*/
      padding-left: 17px;
      -webit-transition: border-color 400ms;
      transition: border-color 400ms;
    }
    #main-menu.navbar-default .dropdown-menu > li > a {
      border-top: 1px solid #404455;
      padding: 15px 0;
      color: #eeeeee;
    }
    #main-menu.navbar-default .dropdown-menu > li:first-child > a {
      border-top: 0;
    }
    #main-menu.navbar-default .dropdown-menu > li.active,
    #main-menu.navbar-default .dropdown-menu > li.open,
    #main-menu.navbar-default .dropdown-menu > li:hover {
      border-left-color: #b80303;
    }
    #main-menu.navbar-default .dropdown-menu > li.active > a,
    #main-menu.navbar-default .dropdown-menu > li.open > a,
    #main-menu.navbar-default .dropdown-menu > li:hover > a {
      color: #b80303;
      background-color: transparent;
    }
  }

mega menu responsive

View Another Modules