Isolate

V248-15

Let op: Dit menu moet gebruikt worden met een hamburger toggle onderin het statische mobiele menu.

Hoe te gebruiken?

Pas in het config bestand de "navbar.style" aan naar "isolate" en laad vervolgens onderstaande CSS in om van start te gaan.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
CSS
.nav-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: translate 0.25s ease-in;
	border-radius: 0 0 var(--panel-radius) var(--panel-radius);
	background-color: var(--secondary-bg);
}

.navbar-light .navbar-nav .nav-link {
	color: var(--primary);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
	color: var(--tertiary);
}

.navbar-light .navbar-nav .nav-link.active {
	color: var(--tertiary);
}

.nav-header .navbar-brand {
	flex-basis: 30%;
}

.nav-header .btn-link {
	padding-left: 0.5rem;
}

.nav-header .btn-link i {
	color: var(--tertiary);
}

.nav-header .btn-link:hover,
.nav-header .btn-link:focus {
	color: var(--tertiary);
}

@media only screen and (min-width: 992px) {
	.navbar-light .navbar-nav {
		gap: 1rem;
	}

	.nav-header .navbar-brand {
		flex-basis: 25%;
	}
}

.nav-header .dropdown {
	text-align: center;
}

.nav-header .dropdown .dropdown-menu {
	border-radius: var(--panel-radius);
}

.nav-header .dropdown .dropdown-toggle::after {
	content: "\f078";
	font: var(--fa-font);
	border: none;
	vertical-align: middle;
	transition: 0.25s transform;
}

.nav-header .dropdown.show .dropdown-toggle::after {
	transform: rotate(180deg);
}

@media only screen and (min-width: 992px) {
	.nav-header .dropdown .dropdown-menu {
		top: 150%;
		padding: 2rem 0;
		border-radius: var(--panel-radius);
	}

	.nav-header .dropdown:has(.dropdown-menu .dropdown-item:nth-child(3)) .dropdown-menu {
		columns: 2;
	}
}

@media only screen and (min-width: 1920px) {
	.nav-header .dropdown:has(.dropdown-menu .dropdown-item:nth-child(7)) .dropdown-menu {
		columns: 4;
	}
}

.nav-header .dropdown .dropdown-item::before {
	font: var(--fa-font);
	content: "\f138";
	color: var(--tertiary);
}

.nav-header .dropdown-item,
.nav-header .dropdown .dropdown-item::before {
	transition: color 0.25s;
}

.nav-header .dropdown .dropdown-item:is(:hover, :focus) {
	color: var(--tertiary);
	text-decoration: none;
	background-color: #fff;
}

.nav-header .dropdown .dropdown-item:is(:hover, :focus)::before {
	color: var(--primary);
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--white);
	color: var(--tertiary);
}

body[data-editor-mode="content"] header.nav-header .navbar [data-partial="call-to-action"] {
	min-width: 13.5em;
}

/* The menu will become fixed if the home page has a header image. */
body:has(.content-subtemplate-home .header img) .nav-header {
	position: fixed;
	border-radius: 0 0 var(--panel-radius) var(--panel-radius);
	width: 100%;
}
@media only screen and (min-width: 1200px) {
	body:has(.content-subtemplate-home .header img) .nav-header {
		left: 2.5%;
		right: 2.5%;
		width: 95%;
		background-color: var(--secondary-bg);
	}
}
JS
onComplete(function () {
	const header = document.querySelector('header.nav-header');
	const screenWidth = window.innerWidth;
	let prevScrollPos;
	let currentScrollPos = document.documentElement.scrollTop;
	window.addEventListener('scroll', function () {
		if (screenWidth > 768) {
			currentScrollPos = document.documentElement.scrollTop;
			if (prevScrollPos > currentScrollPos || prevScrollPos <= 0) {
				header.style.translate = "0 0";
			} else {
				header.style.translate = "0 -100%";
			}
			prevScrollPos = currentScrollPos;
		}
	});
});