Vertical Social Bar

Vertical Social Bar

Vertical Social Bar uses Midnight.js

Midnight.js lets you switch fixed headers on the fly. You can find js included in vendor.min.js

Loading the Scripts :

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

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

                    ├── 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">
        <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>

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

// Start midnight
  // Change this to the correct selector.

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