LP6 Style Guide: Sticky Footer

See demo at bottom.

PHP Snippet

					
<div id="footer-sticky">
	<ul>
		<li><a href="https://online-campus.apus.edu/home/index/<?php returnBrand($GLOBALS["brand"], "short") ?>">Apply Now</a></li>
		<li><a href="#rfi-off-canvas">Request Info</a></li>
		<li><a href="tel:<?php echo $GLOBALS["tel"]?>">Call</a></li>
		<li><a target="_blank" href="https://www.apus.edu/livechat/general.htm">Chat</a></li>
	</ul>
</div>
					
				

CSS Snippet

				
#footer-sticky {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: var(--color-brand-tertiary);
    z-index: 100000;
}
#footer-sticky ul {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
#footer-sticky ul > * {
	text-align: center;
	flex-basis: calc(33.333% - 1px);
	flex-grow: 0;
	flex-shrink: 1;
}
#footer-sticky a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-sec-white);
	background-color: var(--color-brand-primary);
	text-transform: uppercase;
	font-size: 0.8rem;
	line-height: 1;
	padding: 0.5rem;
	height: 40px;
}
#footer-sticky li:nth-child(3) a::before {
    content: "\f095";
    font-family: fontawesome;
	margin-right: 5px;
}
#footer-sticky li:nth-child(4) a::before {
    content: "\f086";
    font-family: fontawesome;
	margin-right: 5px;
}
#footer-sticky a:hover {
	text-decoration: none;
}