Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Butternut Box - Sticky Footer
<div class="sticky-footer">
<a href="#" class="sticky-footer__item sticky-footer__item--active">
<img src="#" alt="Dashboard Icon">
Dashboard
</a>
<a href="#" class="sticky-footer__item">
<img src="#" alt="Dashboard Icon">
My Plan
</a>
<a href="#" class="sticky-footer__item">
<img src="#" alt="Dashboard Icon">
Deliveries
</a>
<a href="#" class="sticky-footer__item">
<img src="#" alt="Dashboard Icon">
My Details
</a>
<a href="#" class="sticky-footer__item">
<img src="#" alt="Dashboard Icon">
Free Food
</a>
</div>
$icon-width: 2.5rem
$nav-drop-shadow: 0 -.2rem .4rem 0 rgba(0, 0, 0, .2)
.sticky-footer
align-items: center
background: $brand-white
bottom: 0
box-shadow: $nav-drop-shadow
display: flex
justify-content: space-evenly
padding: .5rem 0
// When a user is on a iPhone X device, we can use this user agent styling to
// ensure that the right amount of space is given to prevent phone UI form
// interfering with our element
padding-bottom: calc(.5rem + env(safe-area-inset-bottom))
position: sticky
width: 100%
z-index: 1
&__item
align-items: center
color: $grey-600
display: flex
flex-direction: column
font-family: $font-family-base-regular
font-size: 1.4rem
letter-spacing: 0
position: relative
&:hover
color: $grey-600
img
margin-bottom: .5rem
width: $icon-width
height: $icon-width
&--active
color: $brand-blue-500
&::before
background-image: image-url('icons/navigation/icon-link-active.svg')
background-repeat: no-repeat
background-size: contain
content: ''
filter: none
height: $icon-width
position: absolute
width: $icon-width
z-index: -1
img
filter: none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment