Jobpath has 6 Style Header options. So you can choose which one you want.
Header Style 1
Header with absolute position
<!-- header area -->
<header class="rts__section rts__header absolute__header">
<div class="container-none">
<div class="rts__menu__background">
<div class="row">
<div class="d-flex align-items-center justify-content-between">
<div class="rts__logo">
<a href="/doc/">
<img class="logo__image" src="assets/img/logo/header__one.svg" width="160" height="40" alt="logo">
</a>
</div>
<div class="rts__menu d-flex gap-5 gap-lg-4 gap-xl-5 align-items-center">
@@include('header/header__nav.html')
<div class="header__right__btn d-flex gap-3">
<a href="#" class="small__btn d-none d-sm-flex no__fill__btn border-6 font-xs" aria-label="Login Button" data-bs-toggle="modal" data-bs-target="#loginModal"> <i class="rt-login"></i>Sign In</a>
<a href="#" class="small__btn d-none d-sm-flex d-xl-flex fill__btn border-6 font-xs" aria-label="Job Posting Button">Add Job</a>
<button class="d-md-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas"><i class="fa-sharp fa-regular fa-bars"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header area end -->HTML
Header Style 2
Header with absolute position
<!-- header -->
<header class="rts__section rts__header header__style__two absolute__header">
<div class="container">
<div class="row">
<div class="d-flex align-items-center justify-content-between">
<div class="rts__logo">
<a href="/doc/">
<img class="logo__image" src="assets/img/logo/logo__two.svg" width="160" height="40" alt="logo">
</a>
</div>
@@include('header/header__nav.html')
<div class="rts__menu d-flex gap-5 align-items-center">
<div class="header__right__btn d-flex gap-3">
<a href="#" class="small__btn he-2 d-none d-sm-flex no__fill__btn rounded-5 font-xs" ria-label="Login Button" data-bs-toggle="modal" data-bs-target="#loginModal"><i class="rt-login"></i> Sign In</a>
<a href="#" class="small__btn he-2 d-none d-sm-flex fill__btn rounded-5 font-xs" aria-label="Job Posting Button">Add Job</a>
<button class="d-md-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas"><i class="fa-sharp fa-regular fa-bars"></i></button>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header end -->Header Style 3
Header with absolute position
<!-- header area -->
<header class="rts__section rts__header relative__header">
<div class="container-none">
<div class="rts__menu__background">
<div class="row">
<div class="d-flex align-items-center justify-content-between">
<div class="rts__logo">
<a href="/doc/">
<img class="logo__image" src="assets/img/logo/logo_three.svg" width="160" height="40" alt="logo">
</a>
</div>
<div class="rts__menu d-flex gap-5 align-items-center">
@@include('header/header__nav.html')
<div class="header__right__btn d-flex gap-3">
<a href="#" class="small__btn he-3 d-none d-sm-flex no__fill__btn border-6 font-xs" aria-label="Login Button" data-bs-toggle="modal" data-bs-target="#loginModal">
Sign In</a>
<a href="#" class="small__btn he-3 d-none d-sm-flex fill__btn border-6 font-xs" aria-label="Job Posting Button">Add Job</a>
<button class="d-md-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas"><i class="fa-sharp fa-regular fa-bars"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header area end -->Header Style 4
Header with absolute position
<!-- header area -->
<header class="rts__section rts__header relative__header">
<div class="container-none">
<div class="rts__menu__background">
<div class="row">
<div class="d-flex align-items-center justify-content-between">
<div class="rts__logo">
<a href="/doc/">
<img class="logo__image" src="assets/img/logo/logo_three.svg" width="160" height="40" alt="logo">
</a>
</div>
<div class="rts__menu d-flex gap-5 align-items-center">
@@include('header/header__nav.html')
<div class="header__right__btn d-flex gap-3">
<a href="#" class="small__btn d-none d-sm-flex no__fill__btn rounded-0 font-xs" aria-label="Login Button" data-bs-toggle="modal" data-bs-target="#loginModal">
Sign In</a>
<a href="#" class="small__btn d-none d-sm-flex fill__btn rounded-0 font-xs" aria-label="Job Posting Button">Add Job</a>
<button class="d-md-block d-lg-none rounded-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas"><i class="fa-sharp fa-regular fa-bars"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header area end -->Header Style 5
Header with absolute position
<!-- header area -->
<header class="rts__section rts__header relative__header">
<div class="container-fluid">
<div class="rts__menu__background">
<div class="row">
<div class="d-flex align-items-center justify-content-between">
<div class="rts__logo">
<a href="/doc/">
<img class="logo__image" src="assets/img/logo/logo__five.svg" width="160" height="40" alt="logo">
</a>
</div>
@@include('header/header__nav.html')
<div class="rts__menu d-flex gap-5 align-items-center">
<div class="header__right__btn d-flex gap-3">
<a href="#" class="small__btn d-none d-sm-flex no__fill__btn rounded-0 font-xs" aria-label="Login Button" data-bs-toggle="modal" data-bs-target="#loginModal">
Sign In</a>
<a href="#" class="small__btn d-none d-sm-flex fill__btn rounded-0 font-xs" aria-label="Job Posting Button">Add Job</a>
<button class="d-md-block d-lg-none rounded-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas"><i class="fa-sharp fa-regular fa-bars"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header area end -->Header Style 6
Header with absolute position
<!-- header area -->
<header class="rts__section rts__header relative__header">
<div class="container-none">
<div class="rts__menu__background">
<div class="row">
<div class="d-flex align-items-center justify-content-between">
<div class="rts__logo">
<a href="/doc/">
<img class="logo__image" src="assets/img/logo/logo__six.svg" width="160" height="40" alt="logo">
</a>
</div>
@@include('header/header__nav.html')
<div class="rts__menu d-flex gap-5 align-items-center">
<div class="header__right__btn d-flex gap-3">
<a href="#" class="small__btn he-3 d-none d-sm-flex no__fill__btn border-6 font-xs" aria-label="Login Button" data-bs-toggle="modal" data-bs-target="#loginModal">
Sign In</a>
<a href="#" class="small__btn he-3 d-none d-sm-flex fill__btn border-6 font-xs" aria-label="Job Posting Button">Add Job</a>
<button class="d-md-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas"><i class="fa-sharp fa-regular fa-bars"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header area end -->Dropdown Down
Three Label Dropdown Menu
<!-- header area -->
<div class="rts__menu d-flex gap-5 gap-lg-4 gap-xl-5 align-items-center">
<div class="navigation d-none d-lg-block">
<nav class="navigation__menu" id="offcanvas__menu">
<ul class="list-unstyled">
<li class="navigation__menu--item has-child has-arrow">
.......
</li>
<li class="navigation__menu--item has-child has-arrow">
<a href="#" class="navigation__menu--item__link">Browse Jobs</a>
<ul class="submenu sub__style" role="menu">
<li role="menuitem" class="has-child has-arrow">
<a href="#">Job List</a>
<ul class="sub__style" role="menu">
<li role="menuitem"><a href="job-list-1.html">Job List One</a></li>
<li role="menuitem"><a href="job-list-2.html">Job List Two</a></li>
<li role="menuitem"><a href="job-list-3.html">Job List Three</a></li>
<li role="menuitem"><a href="job-list-4.html">Job List Four</a></li>
<li role="menuitem"><a href="job-list-5.html">Job List Five</a></li>
</ul>
</li>
<li role="menuitem" class="has-child has-arrow">
<a href="#">Job Details</a>
<ul class="sub__style" role="menu">
<li role="menuitem"><a href="job-details-1.html">Job Details One</a></li>
</ul>
</li>
</ul>
</li>
<li class="navigation__menu--item has-child has-arrow">
<a href="#" class="navigation__menu--item__link">Employers</a>
<ul class="submenu sub__style" role="menu">
<li role="menuitem" class="has-child has-arrow">
<a href="employer-1.html">Employer Style</a>
<ul class="sub__style" role="menu">
<li role="menuitem"><a href="employer-1.html">Employer One</a></li>
</ul>
</li>
<li role="menuitem" class="has-child has-arrow">
<a href="employer-details-1.html">Employer Details</a>
<ul class="sub__style" role="menu">
<li role="menuitem"><a href="employer-details-1.html">Employer Details 1</a></li>
</ul>
</li>
</ul>
</li>
<li class="navigation__menu--item has-child has-arrow">
......
</li>
<li class="navigation__menu--item has-child has-arrow">
.......
</li>
<li class="navigation__menu--item has-child has-arrow">
......
</li>
</ul>
</nav>
</div>
</div>
<!-- header area end -->Mobile Menu
Mobile Style
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header p-0 mb-5 mt-4">
<a class="offcanvas-title" href="/doc/" id="offcanvasLabel">
<img src="assets/img/logo/header__one.svg" alt="logo">
</a>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- login offcanvas -->
<div class="mb-4 d-block d-sm-none">
<div class="header__right__btn d-flex justify-content-center gap-3">
<a href="#" class="small__btn no__fill__btn border-6 font-xs" aria-label="Login Button" data-bs-toggle="modal" data-bs-target="#loginModal"> <i class="rt-login"></i>Sign In</a>
<a href="#" class="small__btn d-xl-flex fill__btn border-6 font-xs" aria-label="Job Posting Button">Add Job</a>
</div>
</div>
<div class="offcanvas-body p-0">
<div class="rts__offcanvas__menu overflow-hidden">
<div class="offcanvas__menu"></div>
</div>
<p class="max-auto font-20 fw-medium text-center text-decoration-underline mt-4">Our Social Links</p>
@@include('components/social.html', {
"class": "d-flex justify-content-center gap-3 mt-3"
})
</div>
</div>