Storage

CSS
Kopiërenheader.nav-header .navbar-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 100%;
	bottom: 0;
	z-index: 500;
	opacity: 0;
	transform: translateX(0%);
	transition: opacity, transform, left 400ms ease-in-out;
}

header.nav-header .navbar-overlay.show {
	right: 0%;
	opacity: 1;
}

header.nav-header .navbar-overlay-content {
	padding-top: 1em;
	padding-left: calc(((100vw - var(--container-width, 100%)) / 2) + 15px);
	background-color: var(--white);
	max-height: 100%;
	overflow-y: auto;
}

header.nav-header .navbar-overlay-content .title {
	font-size: 2em;
	position: relative;
}

header.nav-header .nav-overlay-backdrop {
	background-color: #0004;
	position: fixed;
	inset: 0;
	z-index: 101;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease-in-out;
}

header.nav-header .navbar-overlay.show+.nav-overlay-backdrop {
	opacity: 1;
	pointer-events: all;
}

header.nav-header .navbar-overlay .nav-link.active .nav-title:not(.dropdown .nav-title)::before {
	content: "";
	height: 22px;
	width: 3px;
	position: absolute;
	right: 10px;
	top: var(--header-navbar-indicator-y);
	transition: all 150ms cubic-bezier(0.46, -0.01, 0.49, 1.29);
	background-color: var(--primary);
}

@media screen and (min-width: 576px) {
	header.nav-header .navbar-overlay-content {
		padding-right: 50px;
	}

	header.nav-header .navbar-overlay-content {
		padding-right: 50px;
	}

	header.nav-header .navbar-overlay .nav-link.active .nav-title::before {
		right: 50px;
	}
}

@media screen and (min-width: 768px) {
	.nav-header {
		top: 2.5rem !important;
		margin-bottom: 2.5rem !important;
	}

	header.nav-header .navbar-toggler {
		margin-right: 2rem;
	}

	header.nav-header .navbar>.container {
		padding: 0.65rem 0.1rem;
	}

	header.nav-header .navbar-brand,
	header.nav-header .navbar-brand img {
		max-width: 200px;
	}

	header.nav-header .navbar-brand img {
		position: absolute;
		top: 0;
		transform: translateY(-50%);
	}

	header.nav-header .navbar-overlay-content {
		padding-top: 3.5rem;
	}

	header.nav-header .navbar [data-partial="call-to-action"] {
		margin-right: 0.5rem;
	}
}

@media screen and (min-width: 992px) {
	#adminbar+* .nav-header {
		top: 7rem !important;
	}

	#adminbar+* header.nav-header .navbar-overlay {
		padding-top: 3.5rem;
	}

	header.nav-header .navbar-overlay.show {
		right: 65%;
	}
}

@media screen and (min-width: 1440px) {
	header.nav-header .navbar-overlay.show {
		right: 60%;
	}
}

.collapse:not(.show) {
	display: none !important;
}

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

/* Standaard opmaak voor dropdown menu's */

.nav-header :is(.navbar, .navbar-overlay-content) .dropdown .dropdown-toggle::after {
	content: "\f078";
	font: var(--fa-font);
	vertical-align: 0.05em;
	border: none;

	transition-property: transform;
	transition-duration: 250ms;
}

.nav-header :is(.navbar, .navbar-overlay-content) .dropdown .dropdown-toggle[aria-expanded="true"]::after {
	transform: rotate(-180deg);
}

.nav-header :is(.navbar, .navbar-overlay-content) .dropdown-menu {
	position: absolute;
	background-color: var(--primary-bg);
	color: inherit;

	/* padding-top: 0; */
	/*  padding-bottom: 0; */
}