<header>

  <!-- SideNav slide-out button -->

  <div class="sticky"><a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fas fa-bars"></i></a></div>

​

  <!-- Sidebar navigation -->

  <div id="slide-out" class="side-nav fixed">

    <ul class="custom-scrollbar">

      <!-- Logo -->

      <li>

        <div class="logo-wrapper waves-light">

          <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>

        </div>

      </li>

      <!--/. Logo -->

      <!--Social-->

      <li>

        <ul class="social">

          <li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>

          <li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>

          <li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>

          <li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>

        </ul>

      </li>

      <!--/Social-->

      <!--Search Form-->

      <li>

        <form class="search-form" role="search">

          <div class="form-group md-form mt-0 pt-1 waves-light">

            <input type="text" class="form-control" placeholder="Search">

          </div>

        </form>

      </li>

      <!--/.Search Form-->

      <!-- Side navigation links -->

      <li>

        <ul class="collapsible collapsible-accordion">

          <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i> Submit blog<i

                class="fas fa-angle-down rotate-icon"></i></a>

            <div class="collapsible-body">

              <ul>

                <li><a href="#" class="waves-effect">Submit listing</a>

                </li>

                <li><a href="#" class="waves-effect">Registration form</a>

                </li>

              </ul>

            </div>

          </li>

          <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-hand-pointer-o"></i> Instruction<i

                class="fas fa-angle-down rotate-icon"></i></a>

            <div class="collapsible-body">

              <ul>

                <li><a href="#" class="waves-effect">For bloggers</a>

                </li>

                <li><a href="#" class="waves-effect">For authors</a>

                </li>

              </ul>

            </div>

          </li>

          <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>

            <div class="collapsible-body">

              <ul>

                <li><a href="#" class="waves-effect">Introduction</a>

                </li>

                <li><a href="#" class="waves-effect">Monthly meetings</a>

                </li>

              </ul>

            </div>

          </li>

          <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-envelope-o"></i> Contact me<i

                class="fas fa-angle-down rotate-icon"></i></a>

            <div class="collapsible-body">

              <ul>

                <li><a href="#" class="waves-effect">FAQ</a>

                </li>

                <li><a href="#" class="waves-effect">Write a message</a>

                </li>

                <li><a href="#" class="waves-effect">FAQ</a>

                </li>

                <li><a href="#" class="waves-effect">Write a message</a>

                </li>

                <li><a href="#" class="waves-effect">FAQ</a>

                </li>

                <li><a href="#" class="waves-effect">Write a message</a>

                </li>

                <li><a href="#" class="waves-effect">FAQ</a>

                </li>

                <li><a href="#" class="waves-effect">Write a message</a>

                </li>

              </ul>

            </div>

          </li>

        </ul>

      </li>

      <!--/. Side navigation links -->

    </ul>

    <div class="sidenav-bg rgba-blue-strong"></div>

  </div>

  <!--/. Sidebar navigation -->

</header>

​

<main>

  <div class="container">

    <div id="lipsum">

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed lorem semper, sollicitudin lectus vitae, porttitor metus. Maecenas venenatis accumsan aliquet. Duis accumsan, nibh eget eleifend semper, ante lectus laoreet tellus, in sollicitudin lorem nibh non lorem. Duis eu dictum mauris. Mauris mattis, nisl vitae maximus tempus, nisi diam dignissim nulla, sed congue nulla libero non eros. Nunc ultrices augue ac neque eleifend feugiat. Mauris ac lacus nec justo aliquam condimentum. Vestibulum posuere lacinia vestibulum. Proin est erat, condimentum ac est sed, viverra porta elit. Nulla dignissim imperdiet justo, a lobortis purus vehicula a.

</p>

<p>

Nulla rhoncus vulputate dictum. Etiam vel lacinia libero. Morbi nunc turpis, fermentum sit amet volutpat non, ullamcorper ac velit. Vivamus facilisis mauris sed orci sagittis mattis. Quisque tempus, eros nec vehicula vehicula, purus arcu auctor odio, eget tempus augue tellus eu sapien. Duis ut neque vitae dolor sagittis gravida at sed nunc. Maecenas sodales egestas ante. Nulla a lorem libero. Ut iaculis eu felis eget venenatis. Mauris a augue augue. Praesent nec eleifend justo. Donec in enim at ante interdum sodales. In non libero velit. Sed placerat vulputate varius. Sed at sapien ante. In at elit blandit, auctor ex fringilla, placerat mauris.

</p>

<p>

Nulla consectetur sem quis massa viverra, auctor placerat nunc varius. Quisque ut pulvinar urna. Duis finibus augue accumsan, accumsan ante ut, egestas augue. Vestibulum ut interdum metus. Nunc sollicitudin sit amet purus ut imperdiet. Mauris auctor mollis nulla pulvinar tincidunt. Quisque malesuada convallis interdum. In tempus et risus a euismod. Maecenas tincidunt quam ac imperdiet elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam quis suscipit mauris, vel porttitor diam. Ut ac ipsum a sapien tincidunt iaculis. Curabitur aliquam dignissim felis, at consectetur purus tincidunt ut. Nulla facilisi. Ut venenatis egestas dictum.

</p>

<p>

Curabitur ac tristique sapien. In nec ante maximus, gravida justo vitae, molestie leo. Ut mollis justo sed enim vehicula pulvinar at eget nisi. Aliquam erat volutpat. Maecenas volutpat vehicula nulla, eget finibus lorem egestas id. Phasellus sodales ultricies dolor sit amet aliquam. Donec nec cursus eros. In hac habitasse platea dictumst. Donec eget quam ut lorem malesuada luctus at et nibh. Vestibulum tincidunt non lectus sed tempus.

</p>

<p>

Ut eleifend tellus sed quam molestie, non gravida enim tempus. Suspendisse eget orci porta, euismod dolor sed, convallis nisi. Praesent tincidunt elementum erat non fermentum. Sed nunc nunc, volutpat quis odio nec, pellentesque tincidunt nibh. Duis pharetra, ligula ut feugiat pretium, lorem felis molestie libero, et suscipit sapien ante eu tellus. Vivamus id quam sit amet dui auctor sagittis vel a ex. In blandit lacinia vehicula.

</p></div>

  </div>

</main>

​

<footer class="page-footer font-small blue">

  <!-- Copyright -->

  <div class="footer-copyright text-center py-3">© 2018 Copyright:

    <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>

  </div>

  <!-- Copyright -->

</footer>

@media (min-width: 1025px) {

  .container {

    margin-top: -50px;

  }

}

// SideNav Button Initialization

$(".button-collapse").sideNav();

// SideNav Scrollbar Initialization

var sideNavScrollbar = document.querySelector('.custom-scrollbar');

Ps.initialize(sideNavScrollbar);