"Bootstrap 4 Dual Navbar"
Bootstrap 4.1.1 Snippet by kshiti06

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 ---------->
<nav class="navbar fixed-top navbar-expand-md flex-nowrap navbar-new-top">
<a href="/" class="navbar-brand"><img src="#" alt=""/>Bootstrap 4</a>
<ul class="nav navbar-nav mr-auto"></ul>
<ul class="navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link px-2">Link</a>
</li>
<li class="nav-item">
<a class="nav-link px-2">Link</a>
</li>
<li class="nav-item">
<button type="button" class="header-btn">Button</button>
</li>
</ul>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<nav class="navbar fixed-top navbar-expand-md navbar-new-bottom">
<div class="navbar-collapse collapse pt-2 pt-md-0" id="navbar2">
<ul class="navbar-nav w-100 justify-content-center px-3">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link">Link</a></a>
</li>
<li class="nav-item">
<a class="nav-link">Link</a>
</li>
<li class="nav-item">
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
.navbar-new-top{
background: #fff;
}
.navbar-brand{
font-weight: 600;
}
.navbar-brand img{
width: 20%;
}
.navbar-new-top ul{
margin-right: 9%;
}
.navbar-new-top ul li{
margin-right: 8%;
}
.navbar-new-bottom{
background-color: #f7f7f7;
box-shadow: 0 5px 6px -2px rgba(0,0,0,.3);
border-top: 1px solid #e0e0e0;
margin-top: 4%;
height: 40px;
}
.navbar-new-bottom ul li{
margin-left: 2%;
margin-right: 2%;
}
.navbar-nav .nav-item a {
color: #333;
font-size: 14px;
font-weight: 600;
transition: 1s ease;
}
.navbar-nav .nav-item a:hover{
color: #0062cc;
}
.dropdown-menu.show{
background: #f8f9fa;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: