<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 id="header" class="d-flex align-items-center">
<div class="container d-flex align-items-center justify-content-between">
<div class="brand">
<a href="#"><img src="images/bootstrapfriendly_logo.png" alt="logo" title="logo" class="img-fluid"></a>
</div>
<div class="menu-bars button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="slide-menu">
<div class="slide-menu-close">
<span class="top"></span>
<span class="bottom"></span>
</div>
<nav class="primary-menu">
<ul id="menu-header-menu">
<li><a href="#">Home</a></li>
<!-- <li><a href="#">About Us</a></li> -->
<li class="dropdownmenu">
<a href="#">Categories<svg class="icon icon-angle-down" aria-hidden="true" role="img">
<use href="#icon-angle-down" xlink:href="#icon-angle-down"></use>
</svg></a>
<ul class="sub-menu">
<li><a href="#">sub cat 01</a></li>
<li><a href="#">sub cat 02</a></li>
<li><a href="#">sub cat 03</a></li>
<li><a href="#">sub cat 04</a></li>
<li><a href="#">sub cat 05</a></li>
</ul>
</li>
<li class="dropdownmenu">
<a href="#">Categories 2<svg class="icon icon-angle-down" aria-hidden="true" role="img">
<use href="#icon-angle-down" xlink:href="#icon-angle-down"></use>
</svg></a>
<ul class="sub-menu">
<li><a href="#">sub cat 01</a></li>
<li><a href="#">sub cat 02</a></li>
<li><a href="#">sub cat 03</a></li>
<li><a href="#">sub cat 04</a></li>
<li><a href="#">sub cat 05</a></li>
</ul>
</li>
<li><a href="#">One This Day</a></li>
<li><a href="#">Explore The World</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</header>
header {
padding: 30px 0;
background-color: #fff;
}
#header {
background: #fff;
transition: all 0.5s;
z-index: 997;
height: 86px;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#header.fixed-top {
height: 70px;
}
/*css start menu */
.primary-menu {
position: relative;
right: 0;
top: 5%;
left: 0px;
}
.primary-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.primary-menu ul li {
float: left;
position: relative;
}
.primary-menu>ul>li>a {
color: #002d62 !important;
float: left;
font-size: 1.2rem !important;
padding: 0.8rem 6rem 0.8rem 1.8rem !important;
font-weight: 700;
text-decoration: none;
width: 100%;
border-bottom: .1rem solid rgba(102, 102, 102, .2);
}
.primary-menu>ul>li>a:hover,
.primary-menu>ul>li>a:focus,
.primary-menu>ul>li>a.active {
color: #0d2481;
text-decoration: none;
}
.dropdownmenu {
position: relative;
}
.dropdownmenu:after {
content: "\f105";
font-family: 'FontAwesome';
position: absolute;
right: 35px;
color: #000;
font-size: 18px;
top: 12px;
}
.dropdownmenu.active:after {
display: none;
}
.dropdownmenu.active:before {
content: "\f107";
font-family: 'FontAwesome';
position: absolute;
right: 35px;
color: #000;
font-size: 18px;
top: 12px;
}
li.dropdownmenu .sub-menu {
background: #efefef !important;
-webkit-box-shadow: inset 0 0.3rem 0.6rem 0 rgb(0 0 0 / 24%);
box-shadow: inset 0 0.3rem 0.6rem 0 rgb(0 0 0 / 24%);
display: none;
padding: 0.3rem 0;
left: 0;
}
li.dropdownmenu .sub-menu li {
float: left;
width: 100%;
padding: 15px 0px 15px 25px;
border-bottom: 0.1rem solid rgba(102, 102, 102, .2);
}
li.dropdownmenu .sub-menu a {
font-size: 16px !important;
font-weight: 700;
color: #03145d;
display: block;
text-decoration: none;
}
#slide-menu {
width: 100%;
}
#slide-menu {
width: 350px;
}
.body-cover {
background-color: rgba(255, 255, 255, 0.7);
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
}
#slide-menu {
height: 100vh;
position: fixed;
top: 0;
right: -100%;
background-color: rgba(255, 255, 255, 0.95);
z-index: 9999;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
box-shadow: 0 0 5px rgb(0 0 0 / 50%);
}
#slide-menu.active {
right: 0;
}
#slide-menu.active {
min-height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
.primary-menu {
margin: 0 0 1rem;
}
.slide-menu-close {
float: left;
font-size: 1.5rem !important;
cursor: pointer;
margin: 1rem 1rem 0;
}
.skip-header ul {
display: table;
}
.skip-header ul li {
display: table-cell;
text-align: center;
width: 1%;
}
.skip-header ul li.search i:after {
background-color: #ababab;
content: '';
left: 0;
top: 16px;
height: 0.9375rem;
width: 1px;
position: absolute;
}
.skip-header ul li.search i:after {
top: 1px;
}
.skip-header ul li .skip-header-dd.active {
display: block;
}
.skip-header ul li .skip-form {
background-color: #dee2fe;
}
.primary-menu ul,
.primary-menu ul li {
width: 100%;
float: left;
}
.skip-header ul li.menu-bars {
cursor: pointer;
}
.skip-header ul li.menu-bars i {
font-size: 18px;
}
li.dropdownmenu .sub-menu {
position: relative;
top: 0;
width: 100%;
}
li.dropdownmenu.active .sub-menu {
display: block;
}
.skip-header {
position: absolute;
}
.primary-menu {
position: absolute;
right: -1rem;
top: 10%;
}
.menu>li>a {
padding-bottom: 1.875rem;
}
.skip-header ul {
width: auto;
}
li.dropdownmenu .dd {
position: relative;
top: 0;
width: 100%;
}
.skip-header ul {
float: right;
}
.skip-header ul li {
float: left;
}
.skip-header ul li a {
padding: 0.625rem 1.25rem;
}
.skip-header ul li {
padding: 0;
}
.primary-menu>ul>li>a svg {
display: none;
}
.button_container {
position: fixed;
top: 0;
right: 9%;
width: 55px;
height: 53px;
cursor: pointer;
transition: opacity .25s ease;
z-index: 9;
margin-top: 18px;
}
.button_container span {
width: 40%;
top: 14px;
}
.button_container span:nth-of-type(2) {
top: 21px;
}
.button_container span:nth-of-type(3) {
top: 28px;
}
.button_container p {
top: 10px;
}
.button_container.active .top {
-webkit-transform: translateY(4px) translateX(0) rotate(45deg);
transform: translateY(4px) translateX(0) rotate(45deg);
}
.slide-menu-close {
width: 40px;
height: 40px;
cursor: pointer;
transition: opacity .25s ease;
z-index: 9;
margin-top: 14px;
background: #03145d;
border-radius: 50%;
}
.slide-menu-close span {
background: #fff;
height: 3px;
width: 25px;
position: absolute;
top: 29px;
left: 24px;
-webkit-transition: all .35s ease;
transition: all .35s ease;
}
.slide-menu-close span:nth-of-type(3) {
top: 28px;
}
.slide-menu-close p {
top: 10px;
}
.slide-menu-close .top {
-webkit-transform: translateY(4px) translateX(0) rotate(45deg);
transform: translateY(4px) translateX(0) rotate(45deg);
}
.slide-menu-close .bottom {
-webkit-transform: translateY(4px) translateX(0) rotate(-45deg);
transform: translateY(4px) translateX(0) rotate(-45deg);
}
header.shrink .button_container {
top: 7px;
}
.button_container:hover {
opacity: .7;
}
.button_container span {
background: #03145d;
height: 3px;
width: 53%;
position: absolute;
top: 17px;
left: 13px;
-webkit-transition: all .35s ease;
transition: all .35s ease;
}
.button_container p {
position: absolute;
left: -55px;
top: 17px;
color: #fff;
font-size: 18px;
font-weight: 600;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container span:nth-of-type(2) {
top: 26px;
left: 16px;
}
.button_container.active .bottom {
-webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span:nth-of-type(3) {
top: 35px;
left: 13px;
}
.button_container.active .top {
-webkit-transform: translateY(8px) translateX(0) rotate(45deg);
transform: translateY(8px) translateX(0) rotate(45deg);
background: #FFF;
}
.overlay {
width: 100%;
position: fixed;
right: 0;
top: 0;
background-color: #093888;
padding: 60px 0;
margin: -100vh 0 0 0px;
-webkit-transition: margin 0.5s ease-in-out;
transition: margin 0.5s ease-in-out;
height: 100vh;
text-align: left;
z-index: 1;
overflow-y: auto;
opacity: .9;
}
.overlay.open {
margin: 0;
}
nav.overlay-menu {
padding-top: 50px;
margin-top: 30px;
}
.overlay-menu ul {
text-align: center;
}
.overlay-menu ul li {
padding: 10px 20px;
}
.overlay-menu ul li a {
color: #fff;
font-size: 30px;
font-weight: 400;
text-decoration: none;
position: relative;
}
.overlay-menu ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 2px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
.overlay-menu ul li a:hover:after,
.overlay-menu ul li a:focus:after,
.overlay-menu ul li a:active:after {
width: 100%;
}
/*** end Menu ***/
@media(max-width:768px) {
.sidebar-contact {
width: 100%;
height: 100%;
left: -100%;
}
.sidebar-contact .toggle {
top: 50%;
transform: translateY(-50%);
transition: 0.5s;
}
.sidebar-contact.active .toggle {
top: 0;
right: 0;
transform: translateY(0);
}
.scroll {
width: 100%;
height: 100%;
overflow-y: auto;
}
.content {
padding: 50px 50px;
}
}
.brand img {
width: 120px;
}
$(document).ready(function () {
$(".menu-bars").click(function () {
$("#slide-menu").addClass("active");
});
$(".slide-menu-close").click(function () {
$("#slide-menu").removeClass("active");
});
$(".skip-form-close").click(function () {
$(".skip-header-dd").removeClass("active");
});
var togle = false;
$(".dropdownmenu").click(function () {
if (togle == false) {
$(this).addClass("active");
togle = true;
} else {
$(this).removeClass("active");
togle = false;
}
});
});
