Header

HTML example:

<!-- START: Header Title

    Additional Classes:
        .nk-header-title-sm
        .nk-header-title-md
        .nk-header-title-lg
        .nk-header-title-xl
        .nk-header-title-full
        .nk-header-title-parallax
        .nk-header-title-parallax-opacity
        .nk-header-title-boxed
-->
<div class="nk-header-title nk-header-title-parallax-opacity">
    <div class="bg-image">
        <div style="background-image: url('assets/images/image-1.jpg');"></div>
    </div>
    <div class="nk-header-table">
        <div class="nk-header-table-cell">
            <div class="container">
                <h2 class="nk-title-back op-1">Back Title</h2>
                <h1 class="nk-title">Title</h1>
                <h2 class="nk-sub-title">Sub Title</h2>

                <div class="nk-gap-2"></div>
                <a class="nk-video-fullscreen-toggle" href="https://www.youtube.com/watch?v=0wCC3aLXdOw">
                    <span class="nk-video-icon"><i class="fa fa-play pl-5"></i></span>
                </a>
            </div>
        </div>
    </div>
    <div class="nk-header-text-bottom">
        Optional Bottom Text
    </div>
</div>
<!-- END: Header Title -->

Additional classes:

  • .nk-header-title-sm – small size;
  • .nk-header-title-md – mid size;
  • .nk-header-title-lg – large size;
  • .nk-header-title-xl – x-large size;
  • .nk-header-title-full – fullscreen size;
  • .nk-header-title-parallax – parallax for background image;
  • .nk-header-title-parallax-opacity – opacity parallax for image;
  • .nk-header-title-boxed – boxed;
Was this page helpful?