<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt="" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="feature.html">Features</a></li>
<li class="nav-item"><a class="nav-link" href="price.html">Price</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="feature.html">Features</a></li>
<li class="nav-item"><a class="nav-link" href="price.html">Price</a></li>
<li class="nav-item"><a class="nav-link" href="element.html">Element</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="single-blog.html">Blog Details</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
<div class="right-button">
<ul>
<li class="shop-icon">
<a href="#"><i class="ti-shopping-cart-full"></i><span>0</span></a>
</li>
<li><a class="sign_up" href="">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
.list {
list-style: none;
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
transition: all 0.3s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
.row.m0 {
margin: 0px;
}
body {
line-height: 24px;
font-size: 14px;
font-family: "Poppins", sans-serif;
font-weight: normal;
color: #7f7f7f;
height: 1000px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Poppins", sans-serif;
font-weight: bold;
}
button:focus {
outline: none;
box-shadow: none;
}
.p_120 {
padding-top: 120px;
padding-bottom: 120px;
}
.pad_top {
padding-top: 120px;
}
.mt-25 {
margin-top: 25px;
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
img {
max-width: 100%;
}
ul {
list-style: none;
padding: 0;
}
/*---------------------------------------------------- */
/*----------------------------------------------------*/
.header_area {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 99;
transition: background 0.4s, all 0.3s linear;
}
.header_area .navbar {
background: transparent;
padding: 0px;
border: 0px;
border-radius: 0px;
}
.header_area .navbar .logo_h {
color: #fff;
height: 80px;
text-align: center;
line-height: 69px;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
}
.header_area .navbar .navbar-brand {
padding-top: 0;
}
.header_area .navbar .nav .nav-item {
margin-right: 45px;
}
.header_area .navbar .nav .nav-item .nav-link {
font: 400 12px/80px "Poppins", sans-serif;
text-transform: capitalize;
color: #fff;
padding: 0px;
display: inline-block;
font-size: 14px;
}
.header_area .navbar .nav .nav-item .nav-link:after {
display: none;
}
.header_area .navbar .nav .nav-item:hover .nav-link,
.header_area .navbar .nav .nav-item.active .nav-link {
color: #f84b67;
}
.header_area .navbar .nav .nav-item.submenu {
position: relative;
}
.header_area .navbar .nav .nav-item.submenu ul {
border: none;
padding: 0px;
border-radius: 0px;
box-shadow: none;
margin: 0px;
background: #fff;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
}
@media (min-width: 992px) {
.header_area .navbar .nav .nav-item.submenu ul {
position: absolute;
top: 120%;
left: 0px;
min-width: 200px;
text-align: left;
opacity: 0;
transition: all 300ms ease-in;
visibility: hidden;
display: block;
border: none;
padding: 0px;
border-radius: 0px;
}
}
.header_area .navbar .nav .nav-item.submenu ul:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #eeeeee transparent transparent transparent;
position: absolute;
right: 24px;
top: 45px;
z-index: 3;
opacity: 0;
transition: all 400ms linear;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item {
display: block;
float: none;
margin-right: 0px;
border-bottom: 1px solid #ededed;
margin-left: 0px;
transition: all 0.4s linear;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
line-height: 45px;
color: #1d1d1d;
padding: 0px 30px;
transition: all 150ms linear;
display: block;
margin-right: 0px;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item:last-child {
border-bottom: none;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {
background: #f84b67;
color: #fff;
}
@media (min-width: 992px) {
.header_area .navbar .nav .nav-item.submenu:hover ul {
visibility: visible;
opacity: 1;
top: 100%;
}
}
.header_area .navbar .nav .nav-item.submenu:hover ul .nav-item {
margin-top: 0px;
}
.header_area .navbar .nav .nav-item:last-child {
margin-right: 0px;
}
.header_area.navbar_fixed .main_menu {
position: fixed;
width: 100%;
top: -70px;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
transform: translateY(70px);
transition: transform 500ms ease, background 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
}
.header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
line-height: 70px;
}
.right-button {
margin-left: 60px;
margin-top: 15px;
}
.right-button ul {
padding: 0;
list-style: none;
}
.right-button ul li {
display: inline-block;
margin-left: 68px;
font-size: 16px;
}
.right-button ul li a {
color: #fff;
}
.right-button .shop-icon {
position: relative;
}
.right-button .shop-icon span {
position: absolute;
background: #e22104;
right: -10px;
top: -4px;
border-radius: 50px;
color: #fff;
width: 15px;
height: 15px;
font-size: 10px;
text-align: center;
line-height: 14px;
}
@media (max-width: 991px) {
.right-button {
display: none;
}
}
.right-button .sign_up {
font-size: 14px;
color: #222222;
background: #fff;
padding: 12px 38px;
border-radius: 3px;
font-weight: 500;
}
#search_input_box {
position: fixed;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
max-width: 1200px;
z-index: 999;
text-align: center;
padding: 0 20px;
background: #f84b67;
}
#search_input_box ::placeholder {
color: #fff;
}
#search_input_box .form-control {
background: transparent;
border: 0;
color: #ffffff;
font-weight: 400;
font-size: 15px;
padding: 0;
}
#search_input_box .btn {
width: 0;
height: 0;
padding: 0;
border: 0;
}
#search_input_box .ti-close {
color: #fff;
font-weight: 600;
cursor: pointer;
padding: 10px;
}
.search-inner {
padding: 5px 15px;
}
.form-control:focus {
box-shadow: none;
}
.navbar_fixed #search_input_box {
position: fixed;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
max-width: 1140px;
z-index: 999;
text-align: center;
padding: 0 20px;
top: 80px;
}
@media (max-width: 991px) {
.header_area .navbar-collapse {
padding: 15px 0px;
}
}
@media (max-width: 1619px) {
.header_area .navbar .search {
margin-left: 40px;
}
}
@media (max-width: 1199px) {
.header_area .navbar .nav .nav-item {
margin-right: 28px;
}
}
@media (max-width: 991px) {
/* Main Menu Area css
============================================================================================ */
.navbar-toggler {
border: none;
border-radius: 0px;
padding: 0px;
cursor: pointer;
margin-top: 27px;
margin-bottom: 23px;
}
.header_area .navbar {
background: #000;
}
.navbar_fixed.header_area .navbar {
background: rgba(0, 0, 0, 0.7);
}
.navbar-toggler[aria-expanded="false"] span:nth-child(2) {
opacity: 1;
}
.navbar-toggler[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.navbar-toggler[aria-expanded="true"] span:first-child {
transform: rotate(-45deg);
position: relative;
top: 7.5px;
}
.navbar-toggler[aria-expanded="true"] span:last-child {
transform: rotate(45deg);
bottom: 6px;
position: relative;
}
.navbar-toggler span {
display: block;
width: 25px;
height: 3px;
background: #f84b67;
margin: auto;
margin-bottom: 4px;
transition: all 400ms linear;
cursor: pointer;
}
.navbar .container {
padding-left: 15px;
padding-right: 15px;
}
.nav {
padding-bottom: 30px;
}
.header_area + section,
.header_area + row,
.header_area + div {
margin-top: 117px;
}
.header_top .nav {
padding: 0px;
}
.header_area .navbar .nav .nav-item .nav-link {
line-height: 40px;
margin-right: 0px;
display: block;
border-bottom: 1px solid #ededed33;
border-radius: 0px;
}
.header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
line-height: 40px;
}
.header_area .navbar .search {
margin-left: 0px;
}
.header_area .navbar-collapse {
max-height: 340px;
overflow-y: scroll;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
padding: 0px 15px;
}
.header_area .navbar .nav .nav-item {
margin-right: 0px;
}
.header_area + section,
.header_area + row,
.header_area + div {
margin-top: 78px;
}
}
@media (max-width: 767px) {
.header_area + section,
.header_area + row,
.header_area + div {
margin-top: 80px;
}
}
@media (max-width: 575px) {
.top_menu {
display: none;
}
.header_area + section,
.header_area + row,
.header_area + div {
margin-top: 71px;
}
}
@media (max-width: 480px) {
.header_area .navbar-collapse {
max-height: 280px;
}
}
/*---------------------------------------------------- */
(function ($) {
"use strict";
var nav_offset_top = $("header").height() + 50;
//* Navbar Fixed
function navbarFixed() {
if ($(".header_area").length) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= nav_offset_top) {
$(".header_area").addClass("navbar_fixed");
} else {
$(".header_area").removeClass("navbar_fixed");
}
});
}
}
navbarFixed();
})(jQuery);
