"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
<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 ---------->
<header id="navbar">
<nav class="navbar-container container">
<a href="/" class="home-link">
<div class="navbar-logo"></div>
Website Name
</a>
<button type="button" class="navbar-toggle" aria-label="Open navigation menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-menu detached">
<ul class="navbar-links">
<li class="navbar-item"><a class="navbar-link" href="/about">About</a></li>
<li class="navbar-item"><a class="navbar-link" href="/blog">Blog</a></li>
<li class="navbar-item"><a class="navbar-link" href="/careers">Careers</a></li>
<li class="navbar-item"><a class="navbar-link" href="/contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<form id="options" class="container">
<label for="detached">Detached <input type="radio" checked name="navtype" id="detached" /></label>
<label for="attached">Attached <input type="radio" name="navtype" id="attached" /></label>
<label for="left-sidebar">Left sidebar <input type="radio" name="navtype" id="left-sidebar" /></label>
<label for="right-sidebar">Right sidebar <input type="radio" name="navtype" id="right-sidebar" /></label>
</form>
</main>
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;
}
main {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 1000px;
padding-left: 1.4rem;
padding-right: 1.4rem;
margin-left: auto;
margin-right: auto;
}
#navbar {
--navbar-height: 64px;
position: fixed;
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
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);
document
.getElementById("options")
.querySelectorAll("input[name='navtype']")
.forEach((option) => {
option.addEventListener("change", (e) => {
const navType = e.target.id.split("-").join(" ");
navbarMenu.classList = "navbar-menu " + navType;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard

Questions / Comments: