Storage

CSS
Kopiëren .nav-header {
	position: sticky;
	z-index: 100;
	margin: 2rem 0;
}

header.nav-header .navbar>.container {
	box-shadow: rgba(1, 1, 1, 0.5) -2px 4px 6px;
	background-color: white;
}

header.nav-header .navbar-brand {
	position: relative;
	width: 100%;
}

header.nav-header .navbar-brand img {
	max-width: 100px;
	z-index: 501;
}

header.nav-header .navbar-toggler {
	z-index: 1000;
	position: relative;
	margin-right: 0.5rem;
	border: none;
}

.navbar-toggler-icon {
	position: relative;
	background-image: none !important;
}

.navbar-toggler-icon i {
	display: block;
	position: absolute;
	height: 0.2em;
	width: 100%;
	left: 0;
	background-color: var(--primary);
	transition: all 250ms ease-in-out;
}

.navbar-toggler-icon i:nth-child(1) {
	top: calc(20% - 0.05em);
}

.navbar-toggler-icon i:nth-child(2) {
	top: calc(50% - 0.05em);
}

.navbar-toggler-icon i:nth-child(3) {
	top: calc(80% - 0.05em);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon i:nth-child(1) {
	top: calc(50% - 0.1em);
	transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon i:nth-child(2) {
	width: 0;
	left: 50%;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon i:nth-child(3) {
	top: calc(50% - 0.1em);
	transform: rotate(-45deg);
}

header.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::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;
}