Sidebar

Left sidebar HTML example:

<div class="container">
    <div class="row equal-height">
        <div class="col-lg-8 push-lg-4">
            <div class="nk-gap-4"></div>
            Content
            <div class="nk-gap-4"></div>
        </div>
        <div class="col-lg-4 pull-lg-8">
            <!--
                START: Sidebar

                Additional Classes:
                    .nk-sidebar-left
                    .nk-sidebar-right
                    .nk-sidebar-sticky
            -->
            <aside class="nk-sidebar nk-sidebar-left">
                <div class="nk-gap-4"></div>
                <div class="nk-widget">
                    <h4 class="nk-widget-title">About Us</h4>
                    <div>
                        <p>
                            Bring bring sea fly over day sixth, land said wherein land blessed third seasons I likeness seed sixth god image.
                        </p>
                        <img src="assets/images/signature.png" alt="" class="nk-img-fit">
                    </div>
                </div>
                ...
                <div class="nk-gap-4"></div>
            </aside>
            <!-- END: Sidebar -->
        </div>
    </div>
</div>

Right sidebar HTML example:

<div class="container">
    <div class="row equal-height">
        <div class="col-lg-8">
            <div class="nk-gap-4"></div>
            Content
            <div class="nk-gap-4"></div>
        </div>
        <div class="col-lg-4">
            <!--
                START: Sidebar

                Additional Classes:
                    .nk-sidebar-left
                    .nk-sidebar-right
                    .nk-sidebar-sticky
            -->
            <aside class="nk-sidebar nk-sidebar-right">
                <div class="nk-gap-4"></div>
                <div class="nk-widget">
                    <h4 class="nk-widget-title">About Us</h4>
                    <div>
                        <p>
                            Bring bring sea fly over day sixth, land said wherein land blessed third seasons I likeness seed sixth god image.
                        </p>
                        <img src="assets/images/signature.png" alt="" class="nk-img-fit">
                    </div>
                </div>
                ...
                <div class="nk-gap-4"></div>
            </aside>
            <!-- END: Sidebar -->
        </div>
    </div>
</div>

Additional classes:

  • .nk-sidebar-left – left sidebar;
  • .nk-sidebar-right – right sidebar;
  • .nk-sidebar-sticky – sticky sidebar content on scroll;
Was this page helpful?