Bootstrap Snippet Menu full screen Desktop using HTML CSS jQuery

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
<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 class="head-main">
            <div class="navbar">
                <div class="container d-flex justify-content-between">
                    <a class="nav-button">
                        <span id="nav-icon3"><span></span><span></span><span></span><span></span></span>
                    </a>
                    <a href="#" class="navbar-brand d-flex align-items-center">
                        <img src="images/logo.png" class="img-fluid" alt="logo">
                    </a>
                    <a href="#" class="d-flex align-items-center">
                        <img src="images/bag.png" class="img-fluid" alt="shop icon">
                    </a>
                </div>
            </div>
            <div class="fixed-top main-menu">
                <div class="flex-center p-5">
                    <ul class="nav flex-column">
                        <li class="nav-item delay-1"><a class="nav-link" href="#">Ingredients</a></li>
                        <li class="nav-item delay-2"><a class="nav-link" href="#">How To Make</a></li>
                        <li class="nav-item delay-3"><a class="nav-link" href="#">Recipes</a></li> 
                        <li class="nav-item delay-3"><a class="nav-link" href="#">Compare</a></li>
                    </ul>
                </div>
            </div>
        </header>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
* ==========================================================================
Main Nav Css Start
========================================================================== */
.navbar {
    height: 70px;
    box-shadow: 0px 5px 12px rgba(204, 204, 204, 0.75);
    background-color: #ffffff;
}
.main-menu {
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}
.nav-open .main-menu {
    opacity: 1;
    visibility: visible;
    background: rgba(255, 255, 255, 0.92);
}
.main-menu .nav li a {
    color: #2c2520;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}
.nav-button {
    position: relative;
    z-index: 1111;
    border: solid 1px #2c2520;
    height: 42px;
    display: block;
    width: 50px;
    padding: 12px;
}
.nav-button #nav-icon3 {
    width: 24px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
jQuery(document).ready(function () {
    //mobile-click//
    $(document).ready(function () {
        $(".nav-button").click(function () {
            $("body").toggleClass("nav-open");
        });
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Menu full screen Desktop"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"Menu full screen Desktop" Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"Menu full screen Desktop"
Bootstrap 4.1.1 Snippet by Shivamsemisetia