"Bootstrap 3 E-commerce Navbar"
Bootstrap 3.3.0 Snippet by ovi100

<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"); }); });

Related: See More


Questions / Comments: