Pump

V281-05

Een variant van de footer.

Hoe te gebruiken?

In de config pas het veld 'navbar.footer.style' aan naar 'pump'.
Zet het footer primary menu op "null" in de config om geen menu weer te geven.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiërenfooter.nav-footer {
	background-color: var(--primary);
	color: white;
}

footer.nav-footer .top {
	padding-top: 6rem;
}

footer.nav-footer .footer-socials {
	margin-top: 1.5rem;
}

footer.nav-footer .contact-address-content {
	display: flex;
}

footer.nav-footer address {
	margin-bottom: 0;
}

footer.nav-footer .contact-address-separator::after {
	content: "\a";
	white-space: pre;
}

footer.nav-footer .top a {
	color: white;
	padding-left: 0;
}

footer .footer-socials a {
	margin: 0 0.5rem 1rem 0;
	font-size: 1.25em;
	transition: 0.4s color;
	color: white;
}

footer.nav-footer .footer-socials a:hover,
footer.nav-footer .footer-socials a:focus,
footer.nav-footer .top a:hover,
footer.nav-footer .top a:focus {
	color: var(--secondary);
}

footer.nav-footer .bottom a,
footer.nav-footer .bottom button {
	color: white;
}

footer.nav-footer .bottom .container {
	border-top: 1px solid #fff;
}

@media only screen and (min-width: 992px){
	footer.nav-footer .navlist-nav{
		display: flex;
		justify-content: space-between;
	}
}