Preloader

To activate the preloader first copy and paste the code below into the body element.

<!--PRELOADER START-->
     <div id="preloader">
        <div class="text-center w-100">
            <div class="loader"></div>
        </div>
    </div>
<!--PRELOADER END-->

Header

To use the header – copy paste this example into your document

<!--Header START-->
<header class="kayden-header sticky-top">
    <div class="header-inside transparent_header">
        <div class="d-flex flex-row justify-content-between align-items-center">
            <!--Header Toggler START-->
            <div class="kayden-menu-toggler">
                <a class="kayden-toggler text-reset" data-bs-toggle="offcanvas" href="#kaydenOffCanvas" role="button" aria-controls="kaydenOffCanvas">
                    <div class="kt-r">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="kt-t">
                        MENU
                    </div>
                </a>
            </div>
            <!--Header Toggler END-->
            <!--Header Logo START-->
            <div class="kayden-logo">
                <a href="#">
                    <img src="./assets/images/logo.svg" height="30" alt="kayden">
                </a>
            </div>
            <!--Header Logo END-->
            <!--Header Info START-->
            <div class="kayden-nav-meta fs-5 fw-bold d-none d-sm-block text-end">
                <a href="#" class="text-reset">+7 123 456 789</a>
            </div>
            <!--Header Info END-->
        </div>
    </div>
</header>
<!--Header END-->

Offcanvas

To use the offcanvas – copy paste this example into your document.

Read more about bootstrap offcanvas

<!--Off Canvas START-->
<div class="offcanvas offcanvas-start" id="kaydenOffCanvas">
    <!--Off Canvas Header START-->
    <div class="offcanvas-header">
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
    </div>
    <!--Off Canvas Header END-->
    <!--Off Canvas Body START-->
    <div class="offcanvas-body">
        <div class="kayden-offcanvas-nav-container d-flex flex-column justify-content-center align-items-center">
                <!--Off Canvas Navigation START-->
                <ul class="kayden-offcanvas-nav list-inline">
                    <li class="py-3">
                        <a href="#home" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Home</a>
                    </li>
                    <li class="py-3">
                        <a href="#about" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">About</a>
                    </li>
                    <li class="py-3">
                        <a href="#portfolio" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Portfolio</a>
                    </li>
                    <li class="py-3">
                        <a href="#faq" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">FAQ</a>
                    </li>
                    <li class="py-3">
                        <a href="#contact" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Contact</a>
                    </li>
                </ul>
                <!--Off Canvas Navigation END-->
        </div>
    </div>
    <!--Off Canvas Body END-->
</div>
<!--Off Canvas END-->

Logo

If you want to change the logo of the website, upload your logo file into assets/images folder, then add your logo url path into img tag that is located inside of kayden-logo div element.

<!--Header Logo START-->
<div class="kayden-logo">
    <a href="#">
        <img src="./assets/images/logo.svg" height="30" alt="kayden">
    </a>
</div>
<!--Header Logo END-->

Section

Kayden template sections contain two parts: heading and body. In the head section you need to write the title of the section, in the content part write the content of the section.

<section class="section-class" id="section-id">
    <div class="container">
        <div class="heading text-center mb-5">
            <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Section Title</h2>
        </div>
        <div class="section-body">
            
        </div>
    </div>
</section>

Each section has an ID attribute. Make sure that the ID name of the section is the same as in the navigation of the “a href” attribute.