"Untitled"
Bootstrap 4.1.1 Snippet by divyalahad

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 ---------->
<div class="site-wrapper">
<div id="layout-header" class="layout-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".mywebapp-nav--header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My WebApp</a>
</div>
<div class="mywebapp-nav--header main-nav collapse navbar-collapse">
<a class="navbar-brand" href="#">My WebApp</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".mywebapp-nav--header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li>
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>Products</span>
</a>
</li>
<li>
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
:root {
--navbar-bg-color: hsl(0, 0%, 15%);
--navbar-text-color: hsl(0, 0%, 85%);
--navbar-text-color-focus: white;
--navbar-bg-contrast: hsl(0, 0%, 25%);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
.container {
max-width: 1000px;
padding-left: 1.4rem;
padding-right: 1.4rem;
margin-left: auto;
margin-right: auto;
}
#navbar {
--navbar-height: 64px;
position: fixed;
height: var(--navbar-height);
background-color: var(--navbar-bg-color);
left: 0;
right: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
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
const navbar = document.getElementById("navbar");
const navbarToggle = navbar.querySelector(".navbar-toggle");
function openMobileNavbar() {
navbar.classList.add("opened");
navbarToggle.setAttribute("aria-label", "Close navigation menu.");
}
function closeMobileNavbar() {
navbar.classList.remove("opened");
navbarToggle.setAttribute("aria-label", "Open navigation menu.");
}
navbarToggle.addEventListener("click", () => {
if (navbar.classList.contains("opened")) {
closeMobileNavbar();
} else {
openMobileNavbar();
}
});
const navbarMenu = navbar.querySelector(".navbar-menu");
const navbarLinksContainer = navbar.querySelector(".navbar-links");
navbarLinksContainer.addEventListener("click", (clickEvent) => {
clickEvent.stopPropagation();
});
navbarMenu.addEventListener("click", closeMobileNavbar);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Full Calendar

Questions / Comments: