Social (v2)

V248-10

Hoe te gebruiken?

In de config bestand zet "navbar.primary" op het menu ID die je wilt weergeven en pas "navbar.style" aan naar "social-2". Laadt vervolgs onderstaande CSS in om van start te gaan.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiërenheader.nav-header .navbar-toggler {
	z-index: 1000;
	position: relative;
}

header.nav-header {
	z-index: 100;
}

header.nav-header .navbar-overlay {
	position: fixed;
	top: 0;
	left: 100%;
	right: 0;
	bottom: 0;
	z-index: 500;

	transform: translateX(0%);
	transition: transform, left 400ms ease-in-out;
}

header.nav-header .navbar-overlay.show {
	left: 0%
}

@media only screen and (min-width: 992px){
	header.nav-header .navbar-overlay.show {
		left: 65%;
	}
}

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

header.nav-header .navbar-overlay > .navbar-overlay-content {
	max-height: 100%;
	overflow-y: scroll;
}

header.nav-header .navbar-overlay-content {
	padding-right: calc(((100vw - var(--container-width)) / 2) + 15px);
	padding-top: 3.5rem;
}

header.nav-header .navbar-overlay-content .nav-link {
	color: black;
}

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

header.nav-header .nav-overlay-backdrop {
	background-color: #0004;
	position: fixed;
	right: 0;
	top: 0;
	height: 100vh;
	width: 100vw;
	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 .nav-link.active .nav-title::before {
	content: "";
	height: 22px;
	width: 3px;
	position: absolute;
	left: 10px;
	top: var(--header-navbar-indicator-y);
	transition: all 150ms cubic-bezier(0.46, -0.01, 0.49, 1.29);
}

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

	header.nav-header .nav-link.active .nav-title::before {
		left: 50px;
	}
}

@media screen and (min-width: 992px) {
	#adminbar + * header.nav-header .navbar-overlay {
		padding-top: 3.5rem;
	}
}

header.nav-header .nav-link.active .nav-title::before {
	background-color: var(--primary);
}

header.nav-header .nav-contact-hover {
	background-color: var(--primary);
}