Loading the Scripts :

                    <script src="/vendors/vendors.min.js"></script>
    

You can find vertical-social.scss from this folder:

                
                    crypto_ico/
                    ├── src/
                    |   ├── scss/
                    |   |   ├── components/
                    |   |   |   ├── vertical-social.scss
                
            

Create your fixed nav (or header) as you typically would. You can use whatever markup suits you, just make sure the header works well with position:fixed.

                    <nav class="vertical-social">
    <ul>
        <li><a href="#"><i class="fa fa-telegram" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-medium" aria-hidden="true"></i></a></li>
        <li><a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-github" aria-hidden="true"></i></a></li>
    </ul>
</nav>
    

To make everything work, just load midnight (and jQuery) and initialize it.Rest of the things will be taken care.

                    <script>
// Start midnight
$(document).ready(function(){
  // Change this to the correct selector.
  $('nav.vertical-social').midnight();
});
</script>
    

Add this code in scss file of each template:

                    // Vertical Social bar
.vertical-social {
    .midnightHeader {
        /* You an add number of possibilities here */
        &.default {
            /* Code for default bar */
        }
        &.white {
            /* Code for white bar */
        }
    }
}

Find more about midnight.js here