"Responsive Dropdown Menu"
Bootstrap 4.0.0 Snippet by abhijeetka

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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="main">
<div class="container">
<nav>
<div class="nav-xbootstrap">
<ul>
<li><a href="https://xbootstrap.com">Home</a></li>
<li><a href="javascript:void(0)">Web Design<span class="glyphicon glyphicon-chevron-down iconsize"></span></a>
<ul class="dropdown">
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">JQuery</a></li>
</ul>
</li>
<li><a href="javascript:void(0)" >Blogger<span class="glyphicon glyphicon-chevron-down iconsize"></span></a>
<ul class="dropdown">
<li><a href="https://xbootstrap.com">Widget</a></li>
<li><a href="https://xbootstrap.com">Tips</a></li>
</ul>
</li>
<li><a href="javascript:void(0)" >Website SEO<span class="glyphicon glyphicon-chevron-down iconsize"></span></a>
<ul class="dropdown">
<li><a href="https://xbootstrap.com">Tools</a></li>
<li><a href="https://xbootstrap.com">Backlink</a></li>
</ul>
</li>
<li><a href="https://xbootstrap.com">Free Themes</a></li>
<li><a href="https://xbootstrap.com">Premium Themes</a></li>
<li><a href="https://xbootstrap.com">Business</a></li>
</ul>
</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
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #F0F0F0;
font-size: 15px;
color: #666;
font-family: 'Bitter', sans-serif;
}
.content {
height: 200px;
}
a { text-decoration: none; }
.container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.nav-xbootstrap {
display: block;
margin-bottom: 15px 0;
background: #03A9F4;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
$(document).ready(function(){
$('.navbar-xbootstrap').click(function(){
$('.nav-xbootstrap').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro
Navbar with Social icon & Dropdown
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)

Questions / Comments: