"https://www.codeply.com/go/JPkcW2yWrB"
Bootstrap 4.1.1 Snippet by jeevan123456

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.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 navbar-expand-sm bg-danger navbar-light fixed-top">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="index.html">
<img src="https://www.duffysrehab.com/wp-content/uploads/sites/55/Duffys-Logo-Desktop.svg" alt="Logo" style="width:370px;">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse bg-danger " id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Car Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dent & Paint</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Car Repair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pickup Location</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
@media (max-width: 992px) {
.navbar-collapse {
position: absolute;
top: 54px;
right: 100%;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 40%;
transition: all 0.3s ease;
display: block;
}
.navbar-collapse.collapsing {
height: auto !important;
margin-right: 50%;
transition: all 0.3s ease;
display: block;
}
.navbar-collapse.show {
right: 0;
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro

Questions / Comments: