Bootstrap Snippet Hemburger + sidemenu + Navbar + ravi using HTML CSS

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
<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/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
<div class="menu"> <span></span> </div>
<nav id="nav">
        <ul class="main">
                <li><a target="_blank" href="https://www.facebook.com/ravi7284007">Hi There! Ravi</a></li>
                <li><a target="_blank" href="https://www.facebook.com/ravi7284007">About ME</a></li>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">Digital Marketing</a></li>
                <li><a target="_blank" href="https://www.instagram.com/ravi_singh_7/">Portfolio</a></li>
                <li><a target="_blank" href="https://500px.com/ravi7284007">Contact</a></li>
        </ul>
</nav>
<div class="overlay"></div>
<script>
$('.menu, .overlay').click(function () {
    $('.menu').toggleClass('clicked');
    
    $('#nav').toggleClass('show');
    
});
</script>
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
    body{background:url(https://img3.goodfon.com/original/3840x2160/3/38/left-4-dead-crossover.jpg) no-repeat center/cover;font-family: 'Poppins', sans-serif; height:150vh; }
    html    {font-size:14px}
    
/*  BURGER MENU
========================================== */
.menu {
        width: 50px;
    height: 50px;
    position: absolute;
    z-index: 21;
    right: 1%;
}
.menu span {
    position: relative;
    margin-top: 9px;
    margin-bottom: 9px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -1.5px;
}
.menu span, .menu span::before, .menu span::after {
    display: block;
    
        width: 26px;
    right: 0;
    height: 3px;
    background-color: #fccb32;
    outline: 1px solid transparent;
    -webkit-transition-property: background-color, -webkit-transform;
    -moz-transition-property: background-color, -moz-transform;
    -o-transition-property: background-color, -o-transform;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hemburger + sidemenu + Navbar + ravi"
Bootstrap 4.1.1 Snippet by ravi7284007

Related: See More

Questions / Comments:

"Hemburger + sidemenu + Navbar + ravi" Bootstrap 4.1.1 Snippet by ravi7284007

Related: See More

Questions / Comments:

"Hemburger + sidemenu + Navbar + ravi"
Bootstrap 4.1.1 Snippet by ravi7284007