Starter
Header Layouts
Job Header
<!-- ========== HEADER ========== -->
<header id="header" class="u-header">
<div class="u-header__section">
<!-- Topbar -->
<div class="container u-header__hide-content pt-2">
<div class="d-flex align-items-center">
<div class="ml-auto">
<!-- Jump To -->
<div class="d-inline-block d-sm-none position-relative mr-4">
<a id="jumpToDropdownInvoker" class="dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;" role="button"
aria-controls="jumpToDropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#jumpToDropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
Jump to
</a>
<div id="jumpToDropdown" class="dropdown-menu dropdown-unfold" aria-labelledby="jumpToDropdownInvoker">
<a class="dropdown-item" href="#">+1 062 109 92 22</a>
<a class="dropdown-item" href="#">Upload your resume</a>
</div>
</div>
<!-- End Jump To -->
<!-- Sign In -->
<div class="d-inline-block d-sm-none">
<a class="small font-weight-medium text-uppercase" href="#">Sign in</a>
</div>
<!-- End Sign In -->
<!-- Links -->
<div class="d-none d-sm-inline-block ml-sm-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-header__navbar-link" href="#">
<span class="far fa-file-alt mr-1"></span>
Upload your resume
</a>
</li>
<li class="list-inline-item">
<a class="u-header__navbar-link" href="#">
<span class="fas fa-user-circle mr-1"></span>
Sign in
</a>
</li>
</ul>
</div>
<!-- End Links -->
</div>
</div>
</div>
<!-- End Topbar -->
<div id="logoAndNav" class="container">
<!-- Nav -->
<nav class="js-mega-menu navbar navbar-expand-md u-header__navbar u-header__navbar--no-space">
<!-- Logo -->
<a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-center" href="index.html" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="46px" height="46px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
<path fill="#3F7DE0" opacity=".65" d="M23,41L23,41c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18h11.3C38,5,41,8,41,11.7V23C41,32.9,32.9,41,23,41z"/>
<path class="fill-info" opacity=".5" d="M28,35.9L28,35.9c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18l11.3,0C43,0,46,3,46,6.6V18C46,27.9,38,35.9,28,35.9z"/>
<path class="fill-primary" opacity=".7" d="M18,46L18,46C8,46,0,38,0,28v0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6V28C35.9,38,27.9,46,18,46z"/>
<path class="fill-white" d="M17.4,34V18.3h10.2v2.9h-6.4v3.4h4.8v2.9h-4.8V34H17.4z"/>
</svg>
<span class="u-header__navbar-brand-text">Front</span>
</a>
<!-- End Logo -->
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn u-hamburger"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="navBar"
data-toggle="collapse"
data-target="#navBar">
<span id="hamburgerTrigger" class="u-hamburger__box">
<span class="u-hamburger__inner"></span>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="navBar" class="collapse navbar-collapse u-header__navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<!-- Link -->
<li class="nav-item u-header__nav-item">
<a class="nav-link u-header__nav-link" href="#">Find jobs</a>
</li>
<!-- End Link -->
<!-- Resources -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="760px"
data-position="right">
<a id="resourcesMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Resources</a>
<!-- Resources - Submenu -->
<div class="hs-mega-menu u-header__sub-menu" aria-labelledby="resourcesMegaMenu">
<div class="row no-gutters">
<div class="col-md-6">
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../job/job-description.html">
<div class="media">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title mb-1">Job description</span>
<small class="u-header__promo-text">Find out more about jobs.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../job/employee-profile.html">
<div class="media">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-48.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title mb-1">Employee profile</span>
<small class="u-header__promo-text">Search and compare employees.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../job/company-profile.html">
<div class="media">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title mb-1">Company profile</span>
<small class="u-header__promo-text">Find great places to work.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<!-- Promo -->
<div class="col-md-6 u-header__promo">
<div class="u-header__promo-inner">
<div class="row">
<div class="col-sm-6">
<!-- Sub Nav Group -->
<span class="u-header__sub-menu-title">Jobs</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../job/jobs-grid.html">Grid</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../job/jobs-grid-side-filter.html">Grid side filter</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../job/jobs-list.html">Listing</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../job/jobs-list-side-filter.html">Listing side filter</a></li>
</ul>
<!-- End Sub Nav Group -->
</div>
<div class="col-sm-6">
<!-- Sub Nav Group -->
<span class="u-header__sub-menu-title">Freelancers</span>
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../job/freelancers-grid.html">Grid</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../job/freelancers-grid-side-filter.html">Grid side filter</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../job/freelancers-list.html">Listing</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../job/freelancers-list-side-filter.html">Listing side filter</a></li>
</ul>
<!-- End Sub Nav Group -->
</div>
</div>
</div>
</div>
<!-- End Promo -->
</div>
</div>
<!-- End Resources - Submenu -->
</li>
<!-- End Resources -->
<!-- Link -->
<li class="nav-item u-header__nav-item">
<a class="nav-link u-header__nav-link" href="../job/companies.html">Company reviews</a>
</li>
<!-- End Link -->
<!-- Demos -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="600px"
data-position="right">
<a id="demosMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Demos</a>
<!-- Demos - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="demosMegaMenu">
<div class="row no-gutters">
<div class="col-md-6">
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="index.html">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-21.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Main demo</span>
<small class="u-header__promo-text">Main demo pages.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../house/index.html">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">House</span>
<small class="u-header__promo-text">Real estate demo.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../crypto/index.html">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Crypto landing</span>
<small class="u-header__promo-text">Cryptocurrency demo.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<!-- Promo -->
<div class="col-md-6 u-header__promo">
<a class="d-block u-header__promo-inner" href="#">
<div class="position-relative">
<img class="img-fluid rounded mb-3" src="../../assets/img/380x227/img6.jpg" alt="Image Description">
<span class="badge badge-success badge-pill badge-pos shadow-sm mt-3">New</span>
</div>
<span class="text-secondary font-size-1">Front makes you look at things from a different perspectives.</span>
</a>
</div>
<!-- End Promo -->
</div>
</div>
<!-- End Demos - Mega Menu -->
</li>
<!-- End Demos -->
<!-- Docs -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="260px"
data-position="right">
<a id="docsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs</a>
<!-- Docs - Submenu -->
<div class="hs-mega-menu u-header__sub-menu" aria-labelledby="docsMegaMenu" style="min-width: 330px;">
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../../documentation/index.html">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">
Documentation
<span class="badge badge-primary badge-pill ml-1">v2.8</span>
</span>
<small class="u-header__promo-text">Development guides</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../../starter/index.html">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-1.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Get started</span>
<small class="u-header__promo-text">Components and snippets</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<div class="u-header__promo-footer">
<!-- List -->
<div class="row no-gutters">
<div class="col-6">
<div class="u-header__promo-footer-item">
<small class="text-muted d-block">Check what's new</small>
<a class="small" href="../../documentation/getting-started/changelog.html">
Changelog
</a>
</div>
</div>
<div class="col-6 u-header__promo-footer-ver-divider">
<div class="u-header__promo-footer-item">
<small class="text-muted d-block">Have a question?</small>
<a class="small" href="http://htmlstream.com/contact-us">
Contact us
</a>
</div>
</div>
</div>
<!-- End List -->
</div>
</div>
<!-- End Docs - Submenu -->
</li>
<!-- End Docs -->
<!-- Button -->
<li class="nav-item u-header__nav-last-item">
<a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
Post Jobs
</a>
</li>
<!-- End Button -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</div>
</div>
</header>
<!-- ========== END HEADER ========== -->
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="../../assets/vendor/hs-megamenu/src/hs.megamenu.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.header.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of HSMegaMenu component
$('.js-mega-menu').HSMegaMenu({
event: 'hover',
pageContainer: $('.container'),
breakpoint: 767.98,
hideTimeOut: 0
});
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of header
$.HSCore.components.HSHeader.init($('#header'));
});
</script>