mtb_dcatadmin_plus/resources/appearance/screenprotector/_header_black.liquid

<header class="site-header fix-top2">
	<div  class="container">
		<div class="header-inner">
			<div class="site-navigation">
				<div class="site-logo">
					<a href="/" title="Mietubl screen protector factory">
					<img width="114" height="37"  src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo.svg" class="a" alt="Mietubl logo">
					<img width="114" height="37"  src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo-black.svg" class="b" alt="Mietubl logo">
					</a>
				</div>
				<nav class="main-nav-container">
					<ul>
						<li class="nav-item"><a title="Home page" href="/">Home</a></li>
						<li class="nav-item has-sub"><a title="About Mietubl" href="#">About Us</a>
								<div class="sub-about-us sub-nav-container" >
									<div class="about-item">
										<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/nav-pic1.jpg"></div>
										<div class="intro"><a href="/pages/about-us" title="About us">About Us</a>
														 <span>Company Overview</span>
										</div>
									</div>
									<div class="about-item">
										<div class="pic"><img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/nav-pic2.jpg"></div>
										<div class="intro"><a href="/pages/factory" title="Factory Tour">Factory Tour</a>
														  <span> Screen Protector Factory</span>
										</div>
									</div>
								</div>
						</li>
						<li class="nav-item has-sub"><a title="Screen protector series" href="#">Products</a>
								<div class="sub-box sub-nav-container">
									<div class="grid-wrapper">
										<div class="grid-col">
											<div class="col-header"><a href="/products/categories/for-mobile-phone" title="Mobile phone screen protectors">For mobile phone</a></div>
											<div class="col"><a href="/products/347" title="Super D screen protector">Super D screen protector</a></div>
											<div class="col"><a href="/products/348" title="Antistatic screen protector">Antistatic screen protector</a></div>
											<div class="col"><a href="/products/349" title="HD clear big curved edge screen protector">HD clear screen protector</a></div>
											<div class="col"><a href="/products/350" title="Colored MTB Glass Screen Protector">Colored MTB Glass Screen Protector</a></div>
											<div class="col"><a href="/products/351" title="Privacy screen protector">Privacy screen protector</a></div>
											<div class="col"><a href="/products/352" title="Hot bending screen protector">Hot bending screen protector</a></div>
											<div class="col"><a href="/products/353" title="UV screen protector">UV screen protector</a></div>
											<div class="col"><a href="/products/354" title="Lace edge screen protector">Lace edge screen protector</a></div>	
											<div class="col"><a href="/products/355" title="Lace edge screen protector">Big curved edge screen protector</a></div>												
										</div>
										<div class="grid-col">
											<div class="col-header"><a href="/products/categories/for-pc" title="Computer screen protectors">For PC</a></div>
											<div class="col"><a href="/products/356" title="Clip-on monitor privacy filter">Clip-on monitor privacy filter</a></div>
											<div class="col"><a href="/products/357" title="PC screen privacy filter">PET screen protector</a></div>
											<div class="col"><a href="/products/358" title="Magnetic privacy screen protector">Magnetic privacy screen protector</a></div>
										</div>
										<div class="grid-col">
											<div class="col-header"><a href="/products/359" title="Tablet screen protectors">For tablet</a></div>								
											<div class="col-header"><a href="/products/360" title="Car screen protectors">For car</a></div>
											<div class="col-header"><a href="/products/361" title="Lens protectors">For phone Lens</a></div>
										</div>
									</div>
								</div>
						</li>
                        <li class="nav-item"><a title="News" href="/collections/news">News</a></li>
                        <li class="nav-item"><a title="" href="/pages/faqs">FAQs</a></li>
                        <li class="nav-item"><a class="btn" href="/pages/Contact-us">Talk To Us</a></li>
					</ul>
				</nav>
			</div>
		</div>

		<div class="mobile-nav">
			<div class="mobile-nav-wrapper">
				<div class="mobile-logo">
					<a href="/" title="Mietubl screen protector factory">
					<img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo.svg" class="a" alt="Mietubl logo">
					<img src="{{ site.asset_base_url}}static/tpl/screenprotector/images/logo-black.svg" class="b" alt="Mietubl logo">
					</a>
				</div>
				<div class="tt-hamburger" id="page-open-main-menu" tabindex="1">
					<span class="bar"></span>
					<span class="bar"></span>
					<span class="bar"></span>
				</div>
			</div>
			<nav class="mobile-main-nav">
					<ul>
						<li><a href="/" title="Home page">Home</a></li>
						<li class="m-sub-nav"><a title="About Mietubl" href="#" >About Us</a>
							<ul class="m-sub-list">
								<li><a href="/pages/about-us" title="About us">About Us</a></li>
								<li><a href="/pages/factory" title="Factory Tour">Factory Tour</a></li>
							</ul>
						</li>
						<li class="m-sub-nav"><a title="About Mietubl" href="#" class="m-sub-nav">Products</a>
							<ul class="m-sub-list">
								<li><a href="{URL}" title="Mobile phone screen protectors">For mobile phone</a></li>
								<li><a href="{URL}" title="Computer screen protectors">For PC</a></li>
								<li><a href="{URL}" title="Tablet screen protectors">For tablet</a></li>
								<li><a href="{URL}" title="Car screen protectors">For car</a></li>
								<li><a href="{URL}" title="Lens protectors">For phone Lens</a></li>
							</ul>
						</li>
						<li><a title="News" href="/collections/news">News</a></li>
						<li><a title="" href="/pages/faq">FAQs</a></li>
						<li><a class="btn" href="/contact">Talk to us</a></li>
					</ul>
			</nav>
		</div>

	</div>
</header>