Pro

V248-12

Bij het gebruiken van deze navbar wordt aangeraden de static bar te gebruiken met daar de navbar toggle in.

Hoe te gebruiken?

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

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren .nav-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color 0.4s;
}

.navbar-pro-absolute{
	position: absolute;
	width: 45%;
	right: 0;
	top: 0;
	background-color: var(--primary);
	color: #fff;
	padding: 1.5rem 0;
	border-bottom-left-radius: var(--panel-radius);
}

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

	.navbar-pro-absolute {
		width: 45%;
	}
}

/* Navigatie toggler met open en sluit animatie. */
.navbar-toggler {
	border: none;
}

.nav-header .navbar-toggler-icon {
	position: relative;
	background-image: none !important;
	width: 100%;
	height: auto;
}

.nav-header .navbar-toggler-icon i:nth-child(1),
.nav-header .navbar-toggler-icon i:nth-child(3) {
	position: absolute;
	display: block;
	height: 0.15em;
	width: 100%;
	left: 0;

	background-color: var(--white);
	transition: all 0.4s;
}

.nav-header .navbar-toggler-icon i:nth-child(1) {
	top: calc(0% - 0.35em);
}

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

.nav-header .navbar-toggler-icon i:nth-child(3) {
	top: calc(100% + 0.25em);
}

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

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

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

.nav-header .navbar-toggler-inner {
	opacity: 1;
	transition: opacity 0.4s;
	text-transform: uppercase;
	font-family: var(--font-family-heading);
}

.nav-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon .navbar-toggler-inner {
	opacity: 0;
}

.nav-header .navbar-toggler-inner {
	padding: 0.5rem 0;
	margin: 0;
	color: var(--white);
}

.nav-header .nav-title {
	position: relative;
	padding: 0.25rem 0;
}

.nav-header li a:focus .nav-title,
.nav-header li a:hover .nav-title {
	background-color: transparent;
	color: var(--white)
}

.nav-header li a .nav-title:before {
	background: var(--white);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transition: width .4s ease;
	width: 0
}

.nav-header li a:focus .nav-title:before,
.nav-header li a:hover .nav-title:before {
	width: 100%
}

/* Place in front of overlay. */
header.nav-header .navbar {
	z-index: 501;
	background-color: transparent !important;
}

/* Hide mock navbar that is part of the overlay. */
header.nav-header .navbar-overlay .navbar {
	visibility: hidden;
	pointer-events: none;
}

/* Setup the overlay. */
header.nav-header .navbar-overlay {
	position: fixed;
	top: -6.5rem;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 500;
}

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

/* Offset for admin bar. */
@media screen and (min-width: 992px) {
	header.nav-header .navbar-overlay {
		left: unset;
	}

	header.nav-header .navbar-overlay>.navbar-overlay-content {
		max-height: 100%;
		overflow-y: scroll;
		padding: 3rem 2rem;
		margin-top: 0;
	}

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

#adminbar+* header.nav-header .navbar-overlay>.navbar-overlay-content {
	max-height: calc(100% - 7rem);
}

/* Position the contact addresses. */
header.nav-header .navbar-overlay>.navbar-overlay-content .contact-addresses address {
	display: inline-block;
	margin: 0;
}

header.nav-header .navbar-overlay>.navbar-overlay-content .contact-addresses .contact-address-title {
	margin-bottom: 0.25rem;
}

header.nav-header .navbar-overlay>.navbar-overlay-content .contact-addresses .contact-address-postal-code {
	display: none;
}

/* Adjust the widths of the columns based on device size. */
header.nav-header .navbar-overlay>.navbar-overlay-content>*>.d-flex>* {
	min-width: 100%;
	margin-bottom: 2rem;
}

@media screen and (min-width: 576px) {
	header.nav-header .navbar-overlay>.navbar-overlay-content>*>.d-flex>* {
		min-width: 50%;
	}
}

@media screen and (min-width: 768px) {
	header.nav-header .navbar-overlay>.navbar-overlay-content>*>.d-flex>* {
		min-width: auto;
	}

	header.nav-header .navbar-overlay>.navbar-overlay-content>*>.d-flex>*:nth-child(2) {
		order: 99;
		width: 100%;
	}
}

/* Allow for an image to be added to the center of the overlay. */
header.nav-header .navbar-overlay .navbar-overlay-content::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	z-index: 0;
	top: 0;
	left: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* Variables for changing the overlay. */
header.nav-header .navbar-overlay {
	background-color: var(--primary) !important;
	border-bottom-left-radius: 20%;
}

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

	header.nav-header .navbar-overlay.show .navbar-overlay-content::before {
		content: "";
		background-color: var(--secondary);
		opacity: 0.9;
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100%;
		transform: translateX(-40%);
		z-index: -1;
	}

}

header.nav-header .navbar-overlay a,
header.nav-header .navbar-overlay .btn.btn-link,
header.nav-header .navbar-overlay .nav-link {
	color: #fff;
}

header.nav-header .navbar-overlay .title {
	color: #fff;
	font-family: var(--font-family-heading);
	font-size: 30px;
	text-transform: uppercase;
}

header.nav-header .navbar-overlay .navbar-nav {
	display: block;
}

@media only screen and (min-width: 992px) {
	header.nav-header .navbar-overlay .navbar-nav {
		columns: 2;
		margin: 2rem 0;
	}
}

header.nav-header .navbar-overlay address {
	margin-bottom: 0;
}

header.nav-header .navbar-overlay .navbar-overlay-content {
	background-color: var(--primary) !important;
}

/* Transition in animation. */
header.nav-header .navbar-overlay {
	animation-timing-function: ease-out;
	animation-duration: 500ms;
	animation-name: navbar-overlay-hide;

	/* Also add hidden animation properties here to avoid flikkering. */
	opacity: 0;
	transform: translate(-100%, -100%);
}

header.nav-header .navbar-overlay.show {
	animation-name: navbar-overlay-show;

	/* Also add hidden animation properties here to ensure it is shown properly. */
	opacity: 1;
	transform: translate(0, 0);
}

@keyframes navbar-overlay-hide {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}

	100% {
		opacity: 0;
		transform: translate(100%, -100%);
	}
}

@keyframes navbar-overlay-show {
	0% {
		opacity: 0;
		transform: translate(100%, -100%);
	}

	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}