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-widget">
                    <div class="nk-widget-content">
                        <form action="#" class="nk-form nk-form-style-1" novalidate="novalidate">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Type something...">
                                <span class="nk-input-group-btn">
                                    <button class="nk-btn nk-btn-color-main-1"><span class="ion-search"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="nk-widget nk-widget-highlighted">
                    <h4 class="nk-widget-title"><div><span class="text-main-1">Latest</span> Video</div></h4>
                    <div class="nk-widget-content">
                        <div class="nk-plain-video" data-video="https://www.youtube.com/watch?v=eBERVWYa-1Y"></div>
                    </div>
                </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-widget">
                    <div class="nk-widget-content">
                        <form action="#" class="nk-form nk-form-style-1" novalidate="novalidate">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Type something...">
                                <span class="nk-input-group-btn">
                                    <button class="nk-btn nk-btn-color-main-1"><span class="ion-search"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="nk-widget nk-widget-highlighted">
                    <h4 class="nk-widget-title"><div><span class="text-main-1">Latest</span> Video</div></h4>
                    <div class="nk-widget-content">
                        <div class="nk-plain-video" data-video="https://www.youtube.com/watch?v=eBERVWYa-1Y"></div>
                    </div>
                </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?