<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E-commerce</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="header" id="header">
<div class="header-left visible-lg">
<div class="main-menu">
<ul>
<li class="has-dropdown">
<a href="">men</a>
<div class="mega-dropdown-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h5 class="mega-dropdown-header">shirts</h5>
<a href="#" class="mega-dropdown-link">formal shirts</a>
<a href="#" class="mega-dropdown-link">casual shirts</a>
<a href="#" class="mega-dropdown-link">regular shirts</a>
<a href="#" class="mega-dropdown-link">tee shirts</a>
</div>
<div class="col-md-4">
<h5 class="mega-dropdown-header">pants</h5>
<a href="#" class="mega-dropdown-link">formal pants</a>
<a href="#" class="mega-dropdown-link">casual pants</a>
<a href="#" class="mega-dropdown-link">regular pants</a>
<a href="#" class="mega-dropdown-link">jeans pant</a>
</div>
<div class="col-md-4">
<h5 class="mega-dropdown-header">others</h5>
<a href="#" class="mega-dropdown-link">socks</a>
<a href="#" class="mega-dropdown-link">belts</a>
<a href="#" class="mega-dropdown-link">shoes</a>
<a href="#" class="mega-dropdown-link">bags</a>
</div>
</div>
</div>
</div>
</li>
<li><a href="">woman</a></li>
<li><a href="">boy</a></li>
<li><a href="">girl</a></li>
<li class="has-dropdown">
<a href="">kids</a>
<div class="mega-dropdown-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h5 class="mega-dropdown-header">shirts</h5>
<a href="#" class="mega-dropdown-link">full slaves</a>
<a href="#" class="mega-dropdown-link">half slaves</a>
<a href="#" class="mega-dropdown-link">regular shirts</a>
<a href="#" class="mega-dropdown-link">tee shirts</a>
</div>
<div class="col-md-4">
<h5 class="mega-dropdown-header">pants</h5>
<a href="#" class="mega-dropdown-link">full pants</a>
<a href="#" class="mega-dropdown-link">half pants</a>
<a href="#" class="mega-dropdown-link">3 quater pants</a>
<a href="#" class="mega-dropdown-link">jeans pant</a>
</div>
<div class="col-md-4">
<h5 class="mega-dropdown-header">others</h5>
<a href="#" class="mega-dropdown-link">socks</a>
<a href="#" class="mega-dropdown-link">toys</a>
<a href="#" class="mega-dropdown-link">shoes</a>
<a href="#" class="mega-dropdown-link">bags</a>
</div>
</div>
</div>
</div>
</li>
<li><a href="">new born</a></li>
</ul>
</div>
</div>
<div class="header-center">
<div class="logo">
<img src="http://placehold.jp/30/000000/ffffff/113x46.jpg?text=LOGO" alt="logo">
</div>
</div>
<div class="header-right">
<div id="mobile-nav">
<i class="fa fa-bars"></i>
</div>
<div class="account-icon hidden-sm hidden-xs">
<div class="account-header">
<img src="https://cdn0.iconfinder.com/data/icons/user-interface-line-19/32/ui_6-512.png">
</div>
<div class="account-body">
<ul>
<li>
<a href="">
<i class="fa fa-key"></i>
register
</a>
</li>
<li>
<a href="">
<i class="fa fa-unlock-alt"></i>
login
</a>
</li>
</ul>
</div>
</div>
<div class="account-icon-mobile visible-sm visible-xs">
<a href=""><img src="https://cdn0.iconfinder.com/data/icons/user-interface-line-19/32/ui_6-512.png"></a>
</div>
<div class="wishlist-icon">
<a href="">
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/heart-512.png">
<span class="wishlist-count">10</span>
</a>
</div>
<div class="search-icon">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-512.png">
</div>
<div id="mini-cart" class="mini-cart">
<div class="cart-header">
<img src="https://cdn0.iconfinder.com/data/icons/essentials-4/1698/shopping_bag_2-512.png">
<span class="cart-count">10</span>
</div>
<div class="cart-body">
<div class="header">
<div class="price-checkout">
<h5>
<b>3 items</b>
</h5>
<h5>
<a href="">view cart</a>
</h5>
</div>
</div>
<div class="content">
<div class="cart-item">
<div class="details">
<div class="name">
<a href="">full product name</a>
</div>
<div class="quntity-unit">
<span>2</span>
<span>x</span>
<span>BDT500</span>
</div>
</div>
<div class="photo">
<a href="">
<img class="img-responsive" src="https://placehold.jp/1000x1000.png">
</a>
</div>
<div class="delete-btn">
<a><i class="fa fa-times"></i></a>
</div>
</div>
<div class="cart-item">
<div class="details">
<div class="name">
<a href="">full product name</a>
</div>
<div class="quntity-unit">
<span>2</span>
<span>x</span>
<span>BDT500</span>
</div>
</div>
<div class="photo">
<a href="">
<img class="img-responsive" src="https://placehold.jp/1000x1000.png">
</a>
</div>
<div class="delete-btn">
<a><i class="fa fa-times"></i></a>
</div>
</div>
<div class="cart-item">
<div class="details">
<div class="name">
<a href="">full product name</a>
</div>
<div class="quntity-unit">
<span>2</span>
<span>x</span>
<span>BDT500</span>
</div>
</div>
<div class="photo">
<a href="">
<img class="img-responsive" src="https://placehold.jp/1000x1000.png">
</a>
</div>
<div class="delete-btn">
<a><i class="fa fa-times"></i></a>
</div>
</div>
<div class="cart-item">
<div class="details">
<div class="name">
<a href="">full product name</a>
</div>
<div class="quntity-unit">
<span>2</span>
<span>x</span>
<span>BDT500</span>
</div>
</div>
<div class="photo">
<a href="">
<img class="img-responsive" src="https://placehold.jp/1000x1000.png">
</a>
</div>
<div class="delete-btn">
<a><i class="fa fa-times"></i></a>
</div>
</div>
</div>
<div class="footer">
<div class="subtotal">
<h5>
<b>subtotal:</b>
</h5>
<h5>
<b>BDT1000</b>
</h5>
</div>
<div class="checkout-button">
<a href="{{cart.one_page_checkout_url}}">checkout</a>
</div>
</div>
</div>
<div class="empty-cart" style="display: none">
<h4>Cart is Empty!</h4>
</div>
</div>
</div>
<div class="searchbox-holder" id="searchbox-holder">
<div class="searchbox" id="searchbox">
<form action="">
<div class="input-group">
<input type="text" class="form-control search-input" placeholder="search by name or collection">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
<div class="search-suggestions">
<div class="scategories">
<div class="sheader">categories</div>
<div class="stext">
<a href="">
<i class="fa fa-cube"></i>
Category 1
</a>
<a href="">
<i class="fa fa-cube"></i>
Category 2
</a>
<a href="">
<i class="fa fa-cube"></i>
Category 3
</a>
<a href="">
<i class="fa fa-cube"></i>
Category 4
</a>
<a href="">
<i class="fa fa-cube"></i>
Category 5
</a>
</div>
</div>
<div class="sproducts">
<div class="sheader">products</div>
<div class="stext">
<div class="media">
<div class="media-left">
<img src="https://placehold.jp/100x100.png" style="width: 80px">
</div>
<div class="media-body">
<h5><a href="">product name</a></h5>
<p>product short description</p>
<p>Tk.500</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img src="https://placehold.jp/100x100.png" style="width: 80px">
</div>
<div class="media-body">
<h5><a href="">product name</a></h5>
<p>product short description</p>
<p>Tk.500</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search-close">
<i class="fa fa-times"></i>
</div>
</div>
</div>
</body>
</html>
body {
background: #ddd;
font-family: "Roboto", sans-serif;
overflow-x: hidden;
height: 2000px;
}
a:hover {
text-decoration: none;
}
/* width */
.content::-webkit-scrollbar {
width: 5px;
}
/* Track */
.content::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.content::-webkit-scrollbar-thumb {
background: #888;
border-radius: 30px;
}
/* Handle on hover */
.content::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* width */
.searchbox div::-webkit-scrollbar {
width: 3px;
}
/* Track */
.searchbox div::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.searchbox div::-webkit-scrollbar-thumb {
background: #000;
}
/* Handle on hover */
.searchbox div::-webkit-scrollbar-thumb:hover {
background: #555;
}
.header {
position: relative;
background: transparent;
display: flex;
align-items: center;
padding: 20px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header [class*=header-] {
display: flex;
align-items: center;
}
.header .header-left {
flex: 1;
}
.header .header-left .main-menu ul {
margin-bottom: 0;
}
.header .header-left .main-menu ul li {
display: inline-block;
margin-right: 1px;
}
.header .header-left .main-menu ul li a {
color: #000;
font-weight: 500;
padding: 0 15px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-left .main-menu ul li a:hover {
color: #38c5af;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-left .main-menu ul .has-dropdown .mega-dropdown-content {
position: absolute;
top: 60px;
min-width: 27%;
max-width: 100%;
background: #fff;
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
visibility: hidden;
opacity: 0;
z-index: -1;
-webkit-transform: translate(0, -20px);
-moz-transform: translate(0, -20px);
-o-transform: translate(0, -20px);
-ms-transform: translate(0, -20px);
transform: translate(0, -20px);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-left .main-menu ul .has-dropdown .mega-dropdown-content .mega-dropdown-header {
color: #000;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
}
.header .header-left .main-menu ul .has-dropdown .mega-dropdown-content .mega-dropdown-link {
color: #808080;
display: block;
font-size: 13px;
margin-bottom: 6px;
padding: 0;
text-transform: capitalize;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-left .main-menu ul .has-dropdown .mega-dropdown-content .mega-dropdown-link:hover {
color: #38c5af;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-left .main-menu ul .has-dropdown .mega-dropdown-content:before {
position: absolute;
left: 25px;
top: -12px;
content: "";
border: 6px solid;
border-color: transparent transparent #fff transparent;
z-index: 3;
}
.header .header-left .main-menu ul .has-dropdown:after {
content: "";
font-family: FontAwesome;
font-size: 15px;
position: relative;
right: 10px;
}
.header .header-left .main-menu ul .has-dropdown:hover .mega-dropdown-content {
visibility: visible;
opacity: 1;
z-index: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-left .main-menu ul .has-dropdown:hover:after {
content: "";
}
.header .header-center {
justify-content: center;
}
.header .header-center .logo {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-right {
flex: 1;
justify-content: flex-end;
}
.header .header-right #mobile-nav {
font-size: 24px;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-right div {
cursor: pointer;
display: inline-block;
margin: 0 10px;
white-space: nowrap;
}
.header .header-right img{
max-height: 24px;
}
.header .header-right .account-icon .account-header:after {
content: "";
font-family: FontAwesome;
font-size: 15px;
position: relative;
right: -5px;
}
.header .header-right .account-icon .account-body {
position: absolute;
top: 65px;
width: 100px;
background: #fff;
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
visibility: hidden;
opacity: 0;
z-index: -1;
-webkit-transform: translate(0, -20px);
-moz-transform: translate(0, -20px);
-o-transform: translate(0, -20px);
-ms-transform: translate(0, -20px);
transform: translate(0, -20px);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-right .account-icon .account-body ul {
padding: 0 10px;
margin: 0;
}
.header .header-right .account-icon .account-body ul li {
list-style: none;
margin: 10px 0;
}
.header .header-right .account-icon .account-body ul li a {
color: #000;
font-size: 15px;
text-transform: capitalize;
}
.header .header-right .account-icon .account-body ul li a:hover {
text-decoration: none;
}
.header .header-right .account-icon .account-body:before {
position: absolute;
content: "";
border: 6px solid;
border-color: transparent transparent #fff transparent;
z-index: 3;
right: 45px;
top: -12px;
}
.header .header-right .account-icon:hover .account-body {
visibility: visible;
opacity: 1;
z-index: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-right .wishlist-icon .wishlist-count {
position: relative;
right: 8px;
top: -5px;
font-size: 11px;
font-weight: 600;
text-align: center;
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 50%;
overflow: hidden;
color: #fff;
background-color: #000;
}
.header .header-right .mini-cart .cart-header .cart-count {
position: relative;
right: 8px;
top: -5px;
font-size: 11px;
font-weight: 600;
text-align: center;
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 50%;
overflow: hidden;
color: #fff;
background-color: #000;
}
.header .header-right .mini-cart .cart-header:after {
content: "";
font-family: FontAwesome;
font-size: 15px;
position: relative;
right: 10px;
}
.header .header-right .mini-cart .cart-body, .header .header-right .mini-cart .empty-cart {
position: absolute;
top: 65px;
right: 25px;
width: 350px;
background: #fff;
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
visibility: hidden;
opacity: 0;
z-index: -1;
-webkit-transform: translate(0, -20px);
-moz-transform: translate(0, -20px);
-o-transform: translate(0, -20px);
-ms-transform: translate(0, -20px);
transform: translate(0, -20px);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-right .mini-cart .cart-body div, .header .header-right .mini-cart .empty-cart div {
display: block;
}
.header .header-right .mini-cart .cart-body .header, .header .header-right .mini-cart .empty-cart .header {
border-bottom: 1px solid #ddd;
padding: 10px;
}
.header .header-right .mini-cart .cart-body .header .price-checkout, .header .header-right .mini-cart .empty-cart .header .price-checkout {
display: flex;
justify-content: space-between;
}
.header .header-right .mini-cart .cart-body .header .price-checkout h5, .header .header-right .mini-cart .empty-cart .header .price-checkout h5 {
color: #000;
text-transform: uppercase;
}
.header .header-right .mini-cart .cart-body .header .price-checkout h5 a, .header .header-right .mini-cart .empty-cart .header .price-checkout h5 a {
color: #000;
}
.header .header-right .mini-cart .cart-body .content, .header .header-right .mini-cart .empty-cart .content {
padding: 10px;
max-height: 305px;
overflow-y: auto;
}
.header .header-right .mini-cart .cart-body .content .cart-item, .header .header-right .mini-cart .empty-cart .content .cart-item {
border-bottom: 1px solid #ddd;
display: flex;
align-items: center;
margin: 0 0 10px 0;
padding: 0 0 10px 0;
}
.header .header-right .mini-cart .cart-body .content .cart-item .photo img, .header .header-right .mini-cart .empty-cart .content .cart-item .photo img {
max-height: 80px;
}
.header .header-right .mini-cart .cart-body .content .cart-item .details, .header .header-right .mini-cart .empty-cart .content .cart-item .details {
flex: 1;
}
.header .header-right .mini-cart .cart-body .content .cart-item .details .name a, .header .header-right .mini-cart .empty-cart .content .cart-item .details .name a {
color: #828282;
font-weight: 600;
text-transform: capitalize;
}
.header .header-right .mini-cart .cart-body .content .cart-item .details .name a:hover, .header .header-right .mini-cart .empty-cart .content .cart-item .details .name a:hover {
text-decoration: none;
}
.header .header-right .mini-cart .cart-body .content .cart-item .details .quntity-unit, .header .header-right .mini-cart .empty-cart .content .cart-item .details .quntity-unit {
color: #828282;
}
.header .header-right .mini-cart .cart-body .content .cart-item .delete-btn, .header .header-right .mini-cart .empty-cart .content .cart-item .delete-btn {
position: relative;
top: -35px;
right: 25px;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
font-size: 11px;
line-height: 20px;
text-align: center;
z-index: 3;
}
.header .header-right .mini-cart .cart-body .content .cart-item .delete-btn a, .header .header-right .mini-cart .empty-cart .content .cart-item .delete-btn a {
color: #000;
}
.header .header-right .mini-cart .cart-body .footer .subtotal, .header .header-right .mini-cart .empty-cart .footer .subtotal {
display: flex;
align-items: center;
justify-content: space-between;
}
.header .header-right .mini-cart .cart-body .footer .subtotal h5, .header .header-right .mini-cart .empty-cart .footer .subtotal h5 {
color: #000;
text-transform: uppercase;
}
.header .header-right .mini-cart .cart-body .footer .checkout-button a, .header .header-right .mini-cart .empty-cart .footer .checkout-button a {
display: block;
background: #000;
color: #fff;
margin: 10px 0;
opacity: 0.8;
padding: 10px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-right .mini-cart .cart-body .footer .checkout-button a:hover, .header .header-right .mini-cart .empty-cart .footer .checkout-button a:hover {
opacity: 1;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .header-right .mini-cart .cart-body:before, .header .header-right .mini-cart .empty-cart:before {
position: absolute;
content: "";
border: 6px solid;
border-color: transparent transparent #000 transparent;
z-index: 3;
right: 43px;
top: -12px;
}
.header .header-right .mini-cart .empty-cart {
padding: 20px;
text-align: center;
}
.header .header-right .mini-cart:hover .cart-body, .header .header-right .mini-cart:hover .empty-cart {
visibility: visible;
opacity: 1;
z-index: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.header .searchbox-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
}
.header .searchbox-holder .searchbox {
width: 50%;
margin: 0 auto;
padding: 40px 0;
}
.header .searchbox-holder .searchbox .input-group .search-input {
height: 45px;
border-radius: 0;
border-color: transparent;
border-right-color: #ddd;
box-shadow: none;
}
.header .searchbox-holder .searchbox .input-group .search-input:focus {
box-shadow: none;
outline: 0;
}
.header .searchbox-holder .searchbox .input-group button {
height: 45px;
border-color: transparent;
border-radius: 0;
padding: 10px 25px;
}
.header .searchbox-holder .searchbox .search-suggestions {
position: absolute;
top: 82px;
width: 50%;
background: #fff;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
display: none;
z-index: 125;
}
.header .searchbox-holder .searchbox .search-suggestions .sheader {
position: sticky;
top: 0;
background: #efefef;
font-size: 14px;
font-weight: 600;
padding: 5px 15px;
text-transform: uppercase;
}
.header .searchbox-holder .searchbox .search-suggestions .stext {
max-height: 210px;
overflow-y: auto;
padding: 10px 15px;
}
.header .searchbox-holder .searchbox .search-suggestions .stext a {
display: block;
color: #000;
font-size: 15px;
margin-bottom: 10px;
}
.header .searchbox-holder .searchbox .search-suggestions .media {
margin-bottom: 15px;
}
.header .searchbox-holder .searchbox .search-suggestions .media a {
color: #000;
}
.header .searchbox-holder .searchbox .search-suggestions .media p:last-child {
margin-bottom: 0;
}
.header .searchbox-holder .searchbox .search-suggestions .media .media-body h5 {
margin-top: 0;
}
.header .searchbox-holder .search-close {
position: absolute;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
font-size: 11px;
line-height: 20px;
text-align: center;
z-index: 3;
}
.fixed-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.fixed-nav .header-center .logo {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media only screen and (max-width: 1199px) {
.header .header-right #mobile-nav {
visibility: visible;
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
}
/*# sourceMappingURL=style.css.map */
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop()>150){
$("#header").addClass("fixed-nav");
}
else{
$("#header").removeClass("fixed-nav");
}
});
$(".search-input").focus(function (){
$(".search-suggestions").fadeIn("slow");
});
$(".search-input").blur(function (){
$(".search-suggestions").fadeOut("slow");
});
var menuHeight = $(".header").height() + 20;
$(".sidenav").css("top",menuHeight+'px');
$(".sidenav-overlay").css("top",menuHeight+'px');
$("#mobile-nav").click(function(event){
event.preventDefault();
$("#sidenav").toggleClass("show-sidenav");
});
$("#sidenav-overlay").click(function(event){
event.preventDefault();
$("#sidenav").removeClass("show-sidenav");
});
$(".search-icon").click(function(event){
event.preventDefault();
$("#searchbox-holder").fadeIn("slow");
$(".search-input").focus();
});
$(".search-close").click(function(event){
event.preventDefault();
$(".search-input").blur();
$("#searchbox-holder").fadeOut("slow");
});
$(".main-menu ul li").hover(function(){
var linkPosition = $(this).offset().left;
var setMdcPosition = linkPosition / 2;
var mdcWidth = $(this).find(".mega-dropdown-content").width();
$(this).find(".mega-dropdown-content").css("left",linkPosition+"px");
});
$(".mini-cart").hover(function(){
var left = $(this).offset().left - 290;
$(this).find(".cart-body").css("left",left+"px");
});
$(".account-icon").hover(function(){
var left = $(this).offset().left - 37;
$(this).find(".account-body").css("left",left+"px");
});
});
