Changing the Header Style
This template have 3 style for the header/navigation style. You can see it on index.html, index-3.html and index-5.html for the difference.
You can simply change the navigation style you want to use. Here is the code for it:
Header style 1
<!-- NAVIGATION -->
<header class="header">
<nav class="top_header mt-3 mt-lg-0">
<div class="top_menu py-1 clearfix d-none d-lg-block">
<div class="container d-flex justify-content-lg-between align-content-center">
<ul class="top_menu_list">
<li>
<i class="far fa-building"></i> Buah Batu Street 40289
</li>
<li>
<i class="far fa-calendar-alt"></i> 07.30 AM - 05.00 PM
</li>
<li>
<i class="far fa-envelope"></i> [email protected]
</li>
</ul>
<!-- /.top_menu_list -->
<ul class="social_top align-self-center">
<li>
<a href="#!"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="#!"><i class="fab fa-pinterest"></i></a>
</li>
<li>
<a href="#!"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#!"><i class="fab fa-facebook"></i></a>
</li>
</ul>
<!-- /.social_top -->
</div>
<!-- /.container -->
</div>
<!-- /.top_menu clearfix -->
<div class="container">
<div class="row mx-0 nav_white">
<div class="col-lg-4 col-6 d-flex align-content-center">
<a class="logo_box align-self-center" href="index.html">
<img class="align-self-center" src="img/logo-black.png" alt="logo">
</a>
</div>
<!-- /.col-lg-4 -->
<div class="btn_col col-lg-8 align-content-center justify-content-end d-none d-lg-flex">
<ul class="nav_menu">
<li class="has_child">
<a 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 href="#!">Pages</a>
<ul class="nav_menu_child">
<li class="has_child"><a href="#!">About</a>
<ul class="nav_menu_child">
<li><a href="about.html">About 1</a></li>
<li><a href="about-2.html">About 2</a></li>
</ul>
</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>
<!-- /.nav_menu_child -->
</li>
<li><a href="events.html">Events</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="has_child">
<a href="#!">Blog</a>
<ul class="nav_menu_child">
<li><a href="blog.html">Blog Sidebar</a></li>
<li><a href="blog-left.html">Blog Left Sidebar</a></li>
<li><a href="single-blog.html">Post Sidebar</a></li>
<li><a href="single-blog-left.html">Post Left Sidebar</a></li>
</ul>
<!-- /.nav_menu_child -->
</li>
</ul>
<a href="contact.html" class="head_btn align-self-center">Join us</a>
</div>
<!-- /.col-lg-8 -->
<div class="col-6 align-content-center align-self-center justify-content-end d-flex d-lg-none">
<a class="mobile_menu_btn" data-bs-toggle="offcanvas" href="#mobilemenu" role="button" aria-controls="mobilemenu">
<i class="fa fa-bars"></i>
</a>
<!-- offcanvas mobile menu -->
<div class="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">
<a href="index.html" class="logo_mobile"><img src="img/logo.png" alt="image"></a>
<ul class="mobile_menu">
<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 class="mdropdown"><a href="#!">About</a>
<ul class="mdropdown_child">
<li><a href="about.html">About 1</a></li>
<li><a href="about-2.html">About 2</a></li>
</ul>
</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>
<!-- /.mdropdown -->
</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 Sidebar</a></li>
<li><a href="blog-left.html">Blog Left Sidebar</a></li>
<li><a href="single-blog.html">Post Sidebar</a></li>
<li><a href="single-blog-left.html">Post Left Sidebar</a></li>
</ul>
</li>
</ul>
<!-- mobile_menu -->
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</nav>
<!-- /.top-header -->
<div class="cloned mt-2 mt-lg-3">
<div class="container cloned_nav"></div>
</div>
</header>
<!-- NAVIGATION END -->
Header style 2
<!-- NAVIGATION -->
<header class="header header_wide">
<nav class="top_header top_header_wide mt-3 mt-lg-0">
<div class="container">
<div class="row nav_white nav_white_wide">
<div class="col-lg-4 col-6 d-flex align-content-center">
<a class="logo_box align-self-center" href="index.html">
<img class="align-self-center logo-white" src="img/logo-white-yellow.png" alt="logo">
<img class="align-self-center logo-black" src="img/logo-black-yellow.png" alt="logo">
</a>
</div>
<!-- /.col-lg-4 -->
<div class="btn_col col-lg-8 align-content-center justify-content-end d-none d-lg-flex">
<ul class="nav_menu">
<li class="has_child">
<a 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 href="#!">Pages</a>
<ul class="nav_menu_child">
<li class="has_child"><a href="#!">About</a>
<ul class="nav_menu_child">
<li><a href="about.html">About 1</a></li>
<li><a href="about-2.html">About 2</a></li>
</ul>
</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>
<!-- /.nav_menu_child -->
</li>
<li><a href="events.html">Events</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="has_child">
<a href="#!">Blog</a>
<ul class="nav_menu_child">
<li><a href="blog.html">Blog Sidebar</a></li>
<li><a href="blog-left.html">Blog Left Sidebar</a></li>
<li><a href="single-blog.html">Post Sidebar</a></li>
<li><a href="single-blog-left.html">Post Left Sidebar</a></li>
</ul>
<!-- /.nav_menu_child -->
</li>
</ul>
<a href="contact.html" class="head_btn align-self-center">Join us</a>
</div>
<!-- /.col-lg-8 -->
<div class="col-6 align-content-center align-self-center justify-content-end d-flex d-lg-none">
<a class="mobile_menu_btn" data-bs-toggle="offcanvas" href="#mobilemenu" role="button" aria-controls="mobilemenu">
<i class="fa fa-bars"></i>
</a>
<!-- offcanvas mobile menu -->
<div class="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">
<a href="index.html" class="logo_mobile"><img src="img/logo-white-yellow.png" alt="image"></a>
<ul class="mobile_menu">
<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 class="mdropdown"><a href="#!">About</a>
<ul class="mdropdown_child">
<li><a href="about.html">About 1</a></li>
<li><a href="about-2.html">About 2</a></li>
</ul>
</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>
<!-- /.mdropdown -->
</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 Sidebar</a></li>
<li><a href="blog-left.html">Blog Left Sidebar</a></li>
<li><a href="single-blog.html">Post Sidebar</a></li>
<li><a href="single-blog-left.html">Post Left Sidebar</a></li>
</ul>
</li>
</ul>
<!-- mobile_menu -->
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</nav>
<!-- /.top-header -->
<div class="cloned">
<div class="container cloned_nav"></div>
</div>
</header>
<!-- NAVIGATION END -->
Header style 3
<!-- NAVIGATION -->
<header class="header header_wide">
<nav class="top_header top_header_wide mt-3 mt-lg-0">
<div class="container">
<div class="row nav_white nav_white_wide nav_wide_dark">
<div class="col-lg-4 col-6 d-flex align-content-center">
<a class="logo_box align-self-center" href="index.html">
<img class="align-self-center logo-white" src="img/logo-green-dark.png" alt="logo">
<img class="align-self-center logo-black" src="img/logo-green-dark.png" alt="logo">
</a>
</div>
<!-- /.col-lg-4 -->
<div class="btn_col col-lg-8 align-content-center justify-content-end d-none d-lg-flex">
<ul class="nav_menu">
<li class="has_child">
<a 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 href="#!">Pages</a>
<ul class="nav_menu_child">
<li class="has_child"><a href="#!">About</a>
<ul class="nav_menu_child">
<li><a href="about.html">About 1</a></li>
<li><a href="about-2.html">About 2</a></li>
</ul>
</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>
<!-- /.nav_menu_child -->
</li>
<li><a href="events.html">Events</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="has_child">
<a href="#!">Blog</a>
<ul class="nav_menu_child">
<li><a href="blog.html">Blog Sidebar</a></li>
<li><a href="blog-left.html">Blog Left Sidebar</a></li>
<li><a href="single-blog.html">Post Sidebar</a></li>
<li><a href="single-blog-left.html">Post Left Sidebar</a></li>
</ul>
<!-- /.nav_menu_child -->
</li>
</ul>
<a href="contact.html" class="head_btn align-self-center">Join us</a>
</div>
<!-- /.col-lg-8 -->
<div class="col-6 align-content-center align-self-center justify-content-end d-flex d-lg-none">
<a class="mobile_menu_btn dark_menu" data-bs-toggle="offcanvas" href="#mobilemenu" role="button" aria-controls="mobilemenu">
<i class="fa fa-bars"></i>
</a>
<!-- offcanvas mobile menu -->
<div class="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">
<a href="index.html" class="logo_mobile"><img src="img/logo-green.png" alt="image"></a>
<ul class="mobile_menu">
<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 class="mdropdown"><a href="#!">About</a>
<ul class="mdropdown_child">
<li><a href="about.html">About 1</a></li>
<li><a href="about-2.html">About 2</a></li>
</ul>
</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>
<!-- /.mdropdown -->
</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 Sidebar</a></li>
<li><a href="blog-left.html">Blog Left Sidebar</a></li>
<li><a href="single-blog.html">Post Sidebar</a></li>
<li><a href="single-blog-left.html">Post Left Sidebar</a></li>
</ul>
</li>
</ul>
<!-- mobile_menu -->
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</nav>
<!-- /.top-header -->
<div class="cloned">
<div class="container cloned_nav"></div>
</div>
</header>
<!-- NAVIGATION END -->