Bootstrap Snippet Simple bootstrap4 megamenu using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<header>
   <div class="container-fluid">
        <div class="row">
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                  <!--navigation bar starts-->
                  <nav class="navbar navbar-expand-md bg-light navbar-light">
                    <!-- Brand -->
                    <a class="navbar-brand" href="#"><img src="https://scontent.fdel3-1.fna.fbcdn.net/v/t1.0-9/59299122_2151996038201124_7867962104349720576_n.png?_nc_cat=106&_nc_sid=85a577&_nc_ohc=5Ufwd4l32C4AX9ZzX8u&_nc_ht=scontent.fdel3-1.fna&oh=2605e6535551b944a6b42fe41a2cd8ba&oe=5EB2FE51" alt="demo-logo" class="w-25"></a>
                    <!-- Toggler/collapsibe Button -->
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <!-- Navbar links -->
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                      <ul class="navbar-nav">
                        <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="dropdown">
                          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Company Details</a>
                          <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">About Company</a>
                            <a class="dropdown-item" href="#">Roadmap</a>
                            <a class="dropdown-item" href="#">One More Link</a>
                            <a class="dropdown-item" href="#">Second More Link</a>
                        </li>
                        <li class="dropdown">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#m-menu {
         left: -17pc;
         min-width: 37rem;
         padding-left: 50px;
         padding-right: 50px;}
      .c-link {
        display: block;
        margin-bottom: 15px;}
      .navbar-nav .nav-link {
        padding-left: 1.7rem !important;
        font-size: 17px !important;}
      .bg-light {
       background-color: #ffffff!important;}
       .w-25 {
       width: 12%!important;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple bootstrap4 megamenu"
Bootstrap 4.1.1 Snippet by anjalish

Related: See More

Questions / Comments:

"Simple bootstrap4 megamenu" Bootstrap 4.1.1 Snippet by anjalish

Related: See More

Questions / Comments:

"Simple bootstrap4 megamenu"
Bootstrap 4.1.1 Snippet by anjalish