/* * ### Start sticky footer ### * Force the footer to always stay on the bottom of the page regardless of how * little content is on the page. */ body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } /* ### End sticky footer ### */ /* * ### Start sidenav-fixed offset ### * The sidenav-fixed class is used which causes the sidenav to be fixed and open * on large screens and hides to the regular functionality on smaller screens. * In order to prevent the sidenav to overlap the content, the content (in our * case header, main and footer) gets an offset equal to the width of the * sidenav. */ header, main, footer { padding-left: 300px; } @media only screen and (max-width : 992px) { header, main, footer { padding-left: 0; } } /* ### End sidenav-fixed offset ### */