As a bonus, we'll add a fixed list of social media buttons at the left side of our page, which will look like that shown in the following screenshot:
First add the following HTML snippets at the end of the html/includes/footer.html
file:
<div class="social-buttons fixed-media bg-accent-color"> <ul> <li>FB</li> <li>TW</li> <li>G+</li> </ul> </div>
Notice that the bg-accent-color
is added to the wrapping <div>
element.
The only SCSS code we have to edit to the scss/includes/_footer.scss
is as follows:
.social-buttons { &.fixed-media { display: none; @include media-breakpoint-up(md) { position: fixed; top: 150px; display: block; } } }
As you can see, Sass enables you to reuse most of the SCSS code you have coded...