"bootstrap 4 fullscreen navigation menu"
Bootstrap 4.0.0 Snippet by mukeshsingh

Post to Facebook Tweet this

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>Mukesh Singh</strong>
</a>
<a class="nav-button ml-auto mr-4"><span id="nav-icon3"><span></span><span></span><span></span><span></span></span></a>
</div>
</div> <!--navbar end-->
<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="#">HOME</a></li>
<li class="nav-item delay-2"><a class="nav-link" href="#">ABOUT US</a></li>
<li class="nav-item delay-3"><a class="nav-link" href="#">PRODUCTS</a></li>
<li class="nav-item delay-4"><a class="nav-link" href="#">APPLICATIONS</a></li>
<li class="nav-item delay-5"><a class="nav-link" href="#">FACILITIES</a></li>
<li class="nav-item delay-6"><a class="nav-link" href="#">QUALITY</a></li>
<li class="nav-item delay-7"><a class="nav-link" href="#">CAREER</a></li>
<li class="nav-item delay-8"><a class="nav-link" href="#">CONTACT US</a></li>
</ul>
</div>
</div> <!--main-menu end-->
</header>
<main role="main" class="container">
<div class="jumbotron my-5">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="#" role="button">View navbar</a>
</div>
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-menu{width: 100%; height: 100%; opacity: 0; visibility: hidden;}
.nav-open .main-menu {opacity: 1; visibility: visible; background: rgba(0, 0, 0, 0.92); }
.main-menu .nav li a{color:#FFF; font-size: 5vh; font-weight:600; }
.main-menu .nav li{
opacity: 0;
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-animation-timing-function: cubic-bezier(.45,.005,0,1);
-moz-animation-timing-function: cubic-bezier(.45,.005,0,1);
-o-animation-timing-function: cubic-bezier(.45,.005,0,1);
animation-timing-function: cubic-bezier(.45,.005,0,1);
}
.nav-open .main-menu .nav li{
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform .2s,opacity .2s;
transition: transform .2s,opacity .2s;
}
.main-menu .nav li.delay-1{-webkit-transition-delay:0.1s; -moz-transition-delay:0.1s; -ms-transition-delay:0.1s; -o-transition-delay:0.1s; transition-delay:0.1s; }
.main-menu .nav li.delay-2{-webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; -ms-transition-delay:0.2s; -o-transition-delay:0.2s; transition-delay:0.2s; }
.main-menu .nav li.delay-3{-webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -ms-transition-delay:0.3s; -o-transition-delay:0.3s; transition-delay:0.3s; }
.main-menu .nav li.delay-4{-webkit-transition-delay:0.4s; -moz-transition-delay:0.4s; -ms-transition-delay:0.4s; -o-transition-delay:0.4s; transition-delay:0.4s; }
.main-menu .nav li.delay-5{-webkit-transition-delay:0.5s; -moz-transition-delay:0.5s; -ms-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s; }
.main-menu .nav li.delay-6{-webkit-transition-delay:0.6s; -moz-transition-delay:0.6s; -ms-transition-delay:0.6s; -o-transition-delay:0.6s; transition-delay:0.6s; }
.main-menu .nav li.delay-7{-webkit-transition-delay:0.7s; -moz-transition-delay:0.7s; -ms-transition-delay:0.7s; -o-transition-delay:0.7s; transition-delay:0.7s; }
.main-menu .nav li.delay-8{-webkit-transition-delay:0.8s; -moz-transition-delay:0.8s; -ms-transition-delay:0.8s; -o-transition-delay:0.8s; transition-delay:0.8s; }
.main-menu .nav li.delay-9{-webkit-transition-delay:0.9s; -moz-transition-delay:0.9s; -ms-transition-delay:0.9s; -o-transition-delay:0.9s; transition-delay:0.9s; }
.nav-button{position:relative; z-index:1111; border:solid 1px #f8f8f8; height:42px; display:block; width:50px; padding:12px; }
.nav-button #nav-icon3{width:24px;height:22px;display:inline-block;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;}
.nav-button #nav-icon3 span{display:block;position:absolute;height:3px;width:100%;background:#FFFFFF;border-radius:9px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
.nav-button #nav-icon3 span:nth-child(1){top:0}
.nav-button #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3){top:7px}
.nav-button #nav-icon3 span:nth-child(4){top:14px}
.nav-open #nav-icon3 span:nth-child(1){top:9px;width:0;left:50%}
.nav-open #nav-icon3 span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
$(document).ready(function(){
$('.nav-button').click(function(){
$('body').toggleClass('nav-open');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro
Cool Navigation Bar
Bootstrap4 navigation border animation
arrow key navigation thumbnail gallery modal view

Questions / Comments:

Hi, i am trying to make the head-main sticky, but i am having no luck, can you help?

kreativstau () - 5 years ago - Reply 0

have you tried css

/ Show it is fixed to the top /

body {

min-height: 75rem;

padding-top: 4.5rem;

}

and at nav the class fixed-top?

nialma () - 5 years ago - Reply 0