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.