Changing the Header or Footer Style
This template offers four different styles for the header/navigation and footer. You can see the variations in index-&.html and other pages.
Changing Header
To change the navigation style, simply modify the code accordingly. Here is an example:
Header in Index 1
<!-- ======================================================================= -->
<!-- HEADER START -->
<!-- ======================================================================= -->
<header class="position-absolute w-100 nav_header">
<nav class="rdn_nav">
<div
class="border-1 border-light-subtle rounded-4 container mt-2 border bg-white p-3 shadow-sm">
<div class="row align-items-center">
<div class="col-lg-3 col-6">
<a href="index.html">
<img src="img/general/logo.png" class="img-fluid logo" alt="" />
</a>
</div>
<!-- /.col-lg-3 -->
<div
class="col-lg-9 d-none d-lg-flex justify-content-end align-items-center gap-1">
<!-- ======================================================================= -->
<!-- DESKTOP NAVIGATION START -->
<!-- ======================================================================= -->
<ul
class="list-unstyled fw-medium d-flex align-items-center justify-content-end m-0 gap-0">
<li class="has_child">
<a class="p-2" href="#!">Home</a>
<ul class="nav_menu_child">
<li><a href="index-1.html">Home 1</a></li>
<li><a href="index-2.html">Home 2</a></li>
<li><a href="index-3.html">Home 3</a></li>
<li><a href="index-4.html">Home 4</a></li>
<li><a href="index-5.html">Home 5</a></li>
</ul>
</li>
<li class="has_child">
<a class="p-2" href="#!">Pages</a>
<ul class="nav_menu_child">
<li><a href="about.html">About</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="single-event.html">Single Event</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a class="p-2" href="events.html">Events</a></li>
<li><a class="p-2" href="contact.html">Contact</a></li>
<li class="has_child">
<a class="p-2" href="#!">Blog</a>
<ul class="nav_menu_child">
<li><a href="blog.html">Blog Page</a></li>
<li><a href="single-blog.html">Single Blog</a></li>
</ul>
</li>
</ul>
<!-- /.list-unstyled -->
<!-- ======================================================================= -->
<!-- DESKTOP NAVIGATION END -->
<!-- ======================================================================= -->
<a
class="d-inline-flex align-items-center fw-medium rounded-pill lh-1 rdn_btn btn_black px-5 py-2"
href="#!">
Join Today
</a>
</div>
<!-- /.col-lg-9 -->
<div class="col-6 justify-content-end d-flex d-lg-none">
<a class="mobile_menu_btn flex" href="#!">
<i class="fa fa-bars"></i>
</a>
<!-- ======================================================================= -->
<!-- offcanvas mobile menu -->
<!-- ======================================================================= -->
<div
class="dark_mobile_menu mobile_menu_container offcanvas offcanvas-start"
tabindex="-1"
data-bs-scroll="true"
id="mobilemenu">
<div class="offcanvas-header">
<button
class="close_mb"
data-bs-dismiss="offcanvas"
aria-label="Close">
<i class="ph-x"></i>
</button>
</div>
<div class="offcanvas-body d-flex flex-column">
<a href="index.html">
<img
src="img/general/logo.png"
alt="image"
class="logo img-fluid" />
</a>
<ul class="list-unstyled mobile_menu smoothscroll mb-auto">
<li class="mdropdown">
<a href="#!">Home</a>
<ul class="mdropdown_child">
<li><a href="index-1.html">Home 1</a></li>
<li><a href="index-2.html">Home 2</a></li>
<li><a href="index-3.html">Home 3</a></li>
<li><a href="index-4.html">Home 4</a></li>
<li><a href="index-5.html">Home 5</a></li>
</ul>
</li>
<li class="mdropdown">
<a href="#!">Pages</a>
<ul class="mdropdown_child">
<li><a href="about.html">About</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="single-event.html">Single Event</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a href="events.html">Events</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="mdropdown">
<a href="#!">Blog</a>
<ul class="mdropdown_child">
<li><a href="blog.html">Blog Page</a></li>
<li><a href="single-blog.html">Single Blog</a></li>
</ul>
</li>
</ul>
<!-- mobile_menu -->
<div class="d-flex flex-column">
<p class="mb-0">Raos - Cycling Template</p>
<p>Copyright ridianur - 2023</p>
<ul class="list-unstyled d-flex mb-0 gap-2">
<li>
<a href="#!"><i class="fa-brands fa-twitter"></i></a>
</li>
<li>
<a href="#!"><i class="fa-brands fa-facebook-f"></i></a>
</li>
<li>
<a href="#!">
<i class="fa-brands fa-pinterest-p"></i>
</a>
</li>
<li>
<a href="#!"><i class="fa-brands fa-telegram"></i></a>
</li>
<li>
<a href="#!"><i class="fa-brands fa-twitch"></i></a>
</li>
</ul>
<!-- /.list-unstyled mb-0 d-flex -->
</div>
<!-- /.d-flex -->
</div>
<!-- offcanvas-body -->
</div>
<!-- mobile_menu_container -->
<!-- ======================================================================= -->
<!-- offcanvas mobile menu end -->
<!-- ======================================================================= -->
</div>
<!-- .col-6 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</nav>
<!-- /.rdn_nav -->
<div class="cloned">
<div class="cloned_nav"></div>
</div>
</header>
<!-- ======================================================================= -->
<!-- HEADER END -->
<!-- ======================================================================= -->
Just make sure to replace the code that start with comment
<!-- ======================================================================= -->
<!-- HEADER START -->
<!-- ======================================================================= -->
and ended with
<!-- ======================================================================= -->
<!-- HOME END -->
<!-- ======================================================================= -->
Changing Footer
To change the footer style, simply modify the code accordingly. Here is an example:
Footer in Index 1
<!-- ======================================================================= -->
<!-- FOOTER START -->
<!-- ======================================================================= -->
<footer class="bg_gray py-12">
<div class="container">
<div class="col-lg-8 offset-lg-2 text-center">
<img
src="img/general/logo-gray.png"
class="img-fluid logo mb-2"
alt="logo" />
<ul
class="list-unstyled fw-medium d-flex flex-column flex-md-row align-items-center justify-content-center gap-md-0 m-0 mb-4 gap-1">
<li><a class="p-2" href="index-1.html">Home</a></li>
<li><a class="p-2" href="about.html">About</a></li>
<li><a class="p-2" href="events.html">Events</a></li>
<li><a class="p-2" href="contact.html">Contact</a></li>
<li><a class="p-2" href="blog.html">Blog</a></li>
</ul>
<!-- /.list-unstyled -->
<ul class="list-unstyled footer_gray_social mb-12">
<li>
<a href="#!">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fa-brands fa-pinterest-p"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fa-brands fa-youtube"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>
</ul>
<!-- /.list-unstyled footer_gray_social mb-12 -->
<p>Copyright 2023 - ridianur - Raos Cycling Club Template</p>
</div>
<!-- /.col-lg-8 offset-lg-2 -->
</div>
<!-- /.container -->
</footer>
<!-- /.py-12 -->
<!-- ======================================================================= -->
<!-- FOOTER END -->
<!-- ======================================================================= -->
Just make sure to replace the code that start with comment
<!-- ======================================================================= -->
<!-- FOOTER START -->
<!-- ======================================================================= -->
and ended with