"Flatsome Navbar - header"
Bootstrap 4.1.1 Snippet by tranhuuphu

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html class="loading-site no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="description" content="@yield('description')"> <meta name="author" content=""> <title>@yield('title')</title> <base href="{{asset('')}}"> <link href="site_asset/css/fl-icons.css?ver=3.3" rel="stylesheet"> <link href="site_asset/css/flatsome.css?ver=3.7.2" rel="stylesheet"> <link href="site_asset/css/flatsome-shop.css?ver=3.7.2" rel="stylesheet"> <script type="text/javascript" src="site_asset/js/jquery.js"></script> {{-- <script type="text/javascript" src="site_asset/js/jquery-3.1.js"></script> --}} <script type="text/javascript" src="site_asset/js/jquery-migrate.min.js"></script> </head> <body class="home page-template page-template-page-blank page-template-page-blank-php page page-id-93 page-child parent-pageid-65 woocommerce-no-js woocommerce-wishlist woocommerce woocommerce-page lightbox nav-dropdown-has-arrow"> <div class="container-fluid" id="wrapper"> <header id="header" class="header has-sticky sticky-jump"> <div class="header-wrapper"> <div id="top-bar" class="header-top hide-for-sticky nav-dark"> <div class="flex-row container"> <div class="flex-col hide-for-medium flex-left"> <ul class="nav nav-left medium-nav-center nav-small nav-divided"></ul> </div><!-- flex-col left --> <div class="flex-col hide-for-medium flex-center"> <ul class="nav nav-center nav-small nav-divided"></ul> </div><!-- center --> <div class="flex-col hide-for-medium flex-right"> <ul class="nav top-bar-nav nav-right nav-small nav-divided"> <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249"><a href="https://quangcaobinhduong.cf/elements/pages/about/" class="nav-top-link">About</a></li> <li id="menu-item-226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-226"><a href="https://quangcaobinhduong.cf/elements/pages/our-stores/" class="nav-top-link">Our Stores</a></li> <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250"><a href="https://quangcaobinhduong.cf/blog/" class="nav-top-link">Blog</a></li> <li id="menu-item-251" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-251"><a href="https://quangcaobinhduong.cf/elements/pages/contact/" class="nav-top-link">Contact</a></li> <li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href="https://quangcaobinhduong.cf/elements/pages/faq/" class="nav-top-link">FAQ</a></li> <li class="header-newsletter-item has-icon"> <a href="#header-newsletter-signup" class="tooltip is-small" title="Sign up for Newsletter"> <i class="icon-envelop"></i> <span class="header-newsletter-title hide-for-medium">Newsletter</span> </a><!-- .newsletter-link --> <div id="header-newsletter-signup" class="lightbox-by-id lightbox-content mfp-hide lightbox-white " style="max-width:700px ;padding:0px"> <div class="banner has-hover" id="banner-58920977"> <div class="banner-inner fill"> <div class="banner-bg fill" > <div class="bg fill bg-fill "></div> <div class="overlay"></div> <div class="is-border is-dashed" style="border-color:rgba(255,255,255,.3);border-width:2px 2px 2px 2px;margin:10px;"></div> </div><!-- bg-layers --> <div class="banner-layers container"> <div class="fill banner-link"></div> <div id="text-box-1000374087" class="text-box banner-layer x10 md-x10 lg-x10 y50 md-y50 lg-y50 res-text"> <div data-animate="fadeInUp"> <div class="text dark"> <div class="text-inner text-left"> <h3 class="uppercase">Sign up for Newsletter</h3> <p class="lead">Signup for our newsletter to get notified about sales and new products. Add any text here or remove it.</p> <div role="form" class="wpcf7" id="wpcf7-f7-o1" lang="en-US" dir="ltr"> <div class="screen-reader-response"></div> <form action="/#wpcf7-f7-o1" method="post" class="wpcf7-form" novalidate="novalidate"> <div style="display: none;"></div> <div class="form-flat"> <span class="wpcf7-form-control-wrap your-email"> <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Your Email (required)" /> </span> <p> <input type="submit" value="Sign Up" class="wpcf7-form-control wpcf7-submit button" /> </p> </div> <div class="wpcf7-response-output wpcf7-display-none"></div> </form> </div> </div> </div><!-- text-box-inner --> </div> <style scope="scope"> #text-box-1000374087 { width: 60%; } #text-box-1000374087 .text { font-size: 100%; } @media (min-width:550px) { #text-box-1000374087 { width: 50%; } } </style> </div><!-- text-box --> </div><!-- .banner-layers --> </div><!-- .banner-inner --> <style scope="scope"> #banner-58920977 { padding-top: 500px; } #banner-58920977 .bg.bg-loaded { background-image: url(); } #banner-58920977 .overlay { background-color: rgba(0,0,0,.4); } </style> </div><!-- .banner --> </div> </li> <li class="html header-social-icons ml-0"> <div class="social-icons follow-icons " > <a href="http://url" target="_blank" data-label="Facebook" rel="noopener noreferrer nofollow" class="icon plain facebook tooltip" title="Follow on Facebook"><i class="icon-facebook" ></i></a> <a href="http://url" target="_blank" rel="noopener noreferrer nofollow" data-label="Instagram" class="icon plain instagram tooltip" title="Follow on Instagram"><i class="icon-instagram" ></i></a> <a href="http://url" target="_blank" data-label="Twitter" rel="noopener noreferrer nofollow" class="icon plain twitter tooltip" title="Follow on Twitter"><i class="icon-twitter" ></i></a> <a href="mailto:your@email" data-label="E-mail" rel="nofollow" class="icon plain email tooltip" title="Send us an email"><i class="icon-envelop" ></i></a> </div> </li> </ul> </div><!-- .flex-col right --> <div class="flex-col show-for-medium flex-grow"> <ul class="nav nav-center nav-small mobile-nav nav-divided"></ul> </div> </div><!-- .flex-row --> </div><!-- #header-top --> <div id="masthead" class="header-main "> <div class="header-inner flex-row container logo-left medium-logo-center" role="navigation"> <!-- Logo --> <div id="logo" class="flex-col logo"> <!-- Header logo --> <a href="https://quangcaobinhduong.cf/" title="Adv, Quảng Cáo, Thi Công Quảng Cáo, Alu, Mica, Led, Inox - Adv, Quảng Cáo, Thi Công Quảng Cáo, Alu, Mica, Led, Inox" rel="home"> <img width="200" height="90" src="https://quangcaobinhduong.cf/wp-content/themes/flatsome/assets/img/logo.png" class="header_logo header-logo" alt="Adv, Quảng Cáo, Thi Công Quảng Cáo, Alu, Mica, Led, Inox"/><img width="200" height="90" src="https://quangcaobinhduong.cf/wp-content/themes/flatsome/assets/img/logo.png" class="header-logo-dark" alt="Adv, Quảng Cáo, Thi Công Quảng Cáo, Alu, Mica, Led, Inox"/></a> </div> <!-- Mobile Left Elements --> <div class="flex-col show-for-medium flex-left"> <ul class="mobile-nav nav nav-left "> <li class="nav-icon has-icon is-small current-lightbox-clicked"> <a href="#" data-open="#main-menu" data-pos="left" data-bg="main-menu-overlay" data-color="" class="is-small" aria-controls="main-menu" aria-expanded="false"><i class="icon-menu" ></i></a> </li> </ul> </div> <!-- Left Elements --> <div class="flex-col hide-for-medium flex-left flex-grow"> <ul class="header-nav header-nav-main nav nav-left nav-uppercase" > <li class="header-search header-search-dropdown has-icon has-dropdown menu-item-has-children"> <a href="#" class="is-small"><i class="icon-search" ></i></a> <ul class="nav-dropdown nav-dropdown-default"> <li class="header-search-form search-form html relative has-icon"> <div class="header-search-form-wrapper"> <div class="searchform-wrapper ux-search-box relative form- is-normal"> <form role="search" method="get" class="searchform" action="https://quangcaobinhduong.cf/"> <div class="flex-row relative"> <div class="flex-col flex-grow"> <input type="search" class="search-field mb-0" name="s" value="" placeholder="Search…" /> <input type="hidden" name="post_type" value="product" /> </div><!-- .flex-col --> <div class="flex-col"> <button type="submit" class="ux-search-submit submit-button secondary button icon mb-0"><i class="icon-search" ></i></button> </div><!-- .flex-col --> </div><!-- .flex-row --> <div class="live-search-results text-left z-top"></div> </form> </div> </div> </li> </ul><!-- .nav-dropdown --> </li> <li id="menu-item-228" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children active menu-item-228 has-dropdown"> <a href="https://quangcaobinhduong.cf/demos/" class="nav-top-link">Demos<i class="icon-angle-down" ></i></a> <ul class='nav-dropdown nav-dropdown-default'> <li id="menu-item-230" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children active menu-item-230 nav-dropdown-col"><a href="https://quangcaobinhduong.cf/demos/shop-demos/">Shop Demos</a> <ul class='nav-column nav-dropdown-default'> <li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-93 current_page_item active menu-item-242"><a href="https://quangcaobinhduong.cf/">Classic Shop</a></li> <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href="https://quangcaobinhduong.cf/demos/shop-demos/simple-slider/">Simple Slider</a></li> <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"><a href="https://quangcaobinhduong.cf/demos/shop-demos/fullscreen-fashion/">Fullscreen Fashion</a></li> <li id="menu-item-233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-233"><a href="https://quangcaobinhduong.cf/demos/shop-demos/video-cover/">Video Cover</a></li> <li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232"><a href="https://quangcaobinhduong.cf/demos/shop-demos/slider-cover/">Slider Cover</a></li> <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"><a href="https://quangcaobinhduong.cf/demos/shop-demos/grid-style-1/">Grid Style 1</a></li> <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248"><a href="https://quangcaobinhduong.cf/demos/shop-demos/grid-style-2/">Grid Style 2</a></li> <li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234"><a href="https://quangcaobinhduong.cf/demos/shop-demos/grid-style-3/">Grid Style 3</a></li> </ul> </li> <li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-page-parent menu-item-has-children menu-item-238 nav-dropdown-col"><a href="https://quangcaobinhduong.cf/demos/shop-demos/">More Shop Demos</a> <ul class='nav-column nav-dropdown-default'> <li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239"><a href="https://quangcaobinhduong.cf/demos/shop-demos/mega-shop/">Mega Shop</a></li> <li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258"><a href="https://quangcaobinhduong.cf/demos/shop-demos/cute-shop/">Cute Shop</a></li> <li id="menu-item-257" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-257"><a href="https://quangcaobinhduong.cf/demos/shop-demos/sport-shop/">Sport Shop</a></li> <li id="menu-item-255" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-255"><a href="https://quangcaobinhduong.cf/demos/shop-demos/vendor-shop/">Vendor Shop</a></li> <li id="menu-item-259" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-259"><a href="https://quangcaobinhduong.cf/demos/shop-demos/parallax-shop/">Parallax Shop</a></li> <li id="menu-item-254" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-254"><a href="https://quangcaobinhduong.cf/demos/shop-demos/big-sale/">Big Sale</a></li> <li id="menu-item-256" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-256"><a href="https://quangcaobinhduong.cf/demos/shop-demos/sale-countdown/">Sale Countdown</a></li> </ul> </li> <li id="menu-item-229" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-229 nav-dropdown-col"><a href="https://quangcaobinhduong.cf/demos/business-demos/">Business Demos</a> <ul class='nav-column nav-dropdown-default'> <li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="https://quangcaobinhduong.cf/demos/business-demos/agency/">Agency</a></li> <li id="menu-item-237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a href="https://quangcaobinhduong.cf/demos/business-demos/simple-corporate/">Corporate</a></li> <li id="menu-item-235" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-235"><a href="https://quangcaobinhduong.cf/demos/business-demos/freelancer/">Freelancer</a></li> <li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="https://quangcaobinhduong.cf/demos/business-demos/explore/">Explore</a></li> <li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="https://quangcaobinhduong.cf/demos/business-demos/lifestyle/">Lifestyle</a></li> </ul> </li> </ul> </li> <li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-227"><a href="https://quangcaobinhduong.cf/shop/" class="nav-top-link">Shop</a></li> <li id="menu-item-243" class="menu-flyout menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-243 has-dropdown"><a href="https://quangcaobinhduong.cf/elements/pages/" class="nav-top-link">Pages<i class="icon-angle-down" ></i></a> <ul class='nav-dropdown nav-dropdown-default'> <li id="menu-item-260" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-260"><a href="https://quangcaobinhduong.cf/elements/pages/portfolio/">Portfolio</a></li> <li id="menu-item-262" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-262"><a href="https://quangcaobinhduong.cf/elements/pages/about/">About</a></li> <li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-261"><a href="https://quangcaobinhduong.cf/elements/pages/contact/">Contact</a></li> <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"><a href="https://quangcaobinhduong.cf/elements/pages/our-stores/">Our Stores</a></li> <li id="menu-item-252" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-252"><a href="https://quangcaobinhduong.cf/elements/pages/maintenance/">Maintenance</a></li> </ul> </li> <li id="menu-item-244" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-244"><a href="https://quangcaobinhduong.cf/blog/" class="nav-top-link">Blog</a></li> <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231"><a href="https://quangcaobinhduong.cf/elements/" class="nav-top-link">Elements</a></li> </ul> </div> <!-- Right Elements --> <div class="flex-col hide-for-medium flex-right"> <ul class="header-nav header-nav-main nav nav-right nav-uppercase"> <li class="account-item has-icon"> <a href="https://quangcaobinhduong.cf/my-account/" class="nav-top-link nav-top-not-logged-in " data-open="#login-form-popup" > <span>Login</span> </a><!-- .account-login-link --> </li> <li class="header-divider"></li> <li class="cart-item has-icon has-dropdown"> <a href="https://quangcaobinhduong.cf/cart/" title="Cart" class="header-cart-link is-small"> <span class="header-cart-title">Cart /<span class="cart-price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>0.00</span></span></span> <span class="cart-icon image-icon"><strong>0</strong></span> </a> <ul class="nav-dropdown nav-dropdown-default"> <li class="html widget_shopping_cart"> <div class="widget_shopping_cart_content"> <p class="woocommerce-mini-cart__empty-message">No products in the cart.</p> </div> </li> </ul><!-- .nav-dropdown --> </li> </ul> </div> <!-- Mobile Right Elements --> <div class="flex-col show-for-medium flex-right"> <ul class="mobile-nav nav nav-right "> <li class="cart-item has-icon"> <a href="https://quangcaobinhduong.cf/cart/" class="header-cart-link off-canvas-toggle nav-top-link is-small" data-open="#cart-popup" data-class="off-canvas-cart" title="Cart" data-pos="right"> <span class="cart-icon image-icon"><strong>0</strong></span> </a> <!-- Cart Sidebar Popup --> <div id="cart-popup" class="mfp-hide widget_shopping_cart"> <div class="cart-popup-inner inner-padding"> <div class="cart-popup-title text-center"> <h4 class="uppercase">Cart</h4> <div class="is-divider"></div> </div> <div class="widget_shopping_cart_content"> <p class="woocommerce-mini-cart__empty-message">No products in the cart.</p> </div> <div class="cart-sidebar-content relative"></div> </div> </div> </li> </ul> </div> </div><!-- .header-inner --> <!-- Header divider --> <div class="container"><div class="top-divider full-width"></div> </div> </div><!-- .header-main --> <div class="header-bg-container fill"><div class="header-bg-image fill"></div> <div class="header-bg-color fill"></div> </div><!-- .header-bg-container --> </div><!-- header-wrapper--> </header> </div> <script type="text/javascript" src="site_asset/js/flatsome.js?ver=3.7.2"></script> </body> </html>
<style id="custom-css" type="text/css">:root {--primary-color: #446084;}/* Site Width */.header-main{height: 90px}#logo img{max-height: 90px}#logo{width:200px;}.header-top{min-height: 30px}.has-transparent + .page-title:first-of-type,.has-transparent + #main > .page-title,.has-transparent + #main > div > .page-title,.has-transparent + #main .page-header-wrapper:first-of-type .page-title{padding-top: 120px;}.header.show-on-scroll,.stuck .header-main{height:70px!important}.stuck #logo img{max-height: 70px!important}.header-bottom {background-color: #f1f1f1}@media (max-width: 549px) {.header-main{height: 70px}#logo img{max-height: 70px}}body{font-family:"Lato", sans-serif}body{font-weight: 400}.nav > li > a {font-family:"Lato", sans-serif;}.nav > li > a {font-weight: 700;}h1,h2,h3,h4,h5,h6,.heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a{font-family: "Lato", sans-serif;}h1,h2,h3,h4,h5,h6,.heading-font,.banner h1,.banner h2{font-weight: 700;}.alt-font{font-family: "Dancing Script", sans-serif;}.alt-font{font-weight: 400!important;}@media screen and (min-width: 550px){.products .box-vertical .box-image{min-width: 300px!important;width: 300px!important;}}.label-new.menu-item > a:after{content:"New";}.label-hot.menu-item > a:after{content:"Hot";}.label-sale.menu-item > a:after{content:"Sale";}.label-popular.menu-item > a:after{content:"Popular";} </style>

Related: See More


Questions / Comments: