Pump

V281-05

Een variant van de footer.

Hoe te gebruiken?

In de config pas het veld 'navbar.footer.style' aan naar 'pump'.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
CSS
footer.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);
}

/* Optie om geen menu te tonen*/

/* footer.nav-footer .navlist {
	display: none;
} */


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;
	}
}