header

Show / Hide Code

		<header class="ui header">
			<div class="header--inner">
				<menu class="header--buy as-alternative">
					<button id="header--button" name="header--button" class="header--button">Buy Now</button>
				</menu>
				<div class="header--logo">
					<h1><a href=""><img src="./content/images/header-logo.png" alt="Logo"></a></h1>
				</div>
				<nav class="header--navigation">
					<span class="header--navigation--title"><span>Menu</span></span>
					<ul class="header--navigation--items">
						<li class="header--navigation--item">
							<a href=""><span>Home</span></a>
						</li>
						<li class="header--navigation--item">
							<a href=""><span>Products</span></a>
							<span class="share-caret-down"><span>Open</span></span>
							<ul class="header--navigation--subitems">
								<li class="header--navigation--subitem"><a href="">Munchkin</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin 2 – Unnatural Axe</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin 3 – Clerical Errors</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin 4 – The Need For Steed</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin Zombies</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin Zombies 2 – Armed and Dangerous</a></li>
								<li class="header--navigation--subitem is-active"><a href="">Munchkin Zombies 3 – Hideous Hideouts</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin Zombies 4 – Spare Parts</a></li>
							</ul>
						</li>
						<li class="header--navigation--item">
							<a href=""><span>Why this Website</span></a>
							<span class="share-caret-down"><span>Open</span></span>
							<ul class="header--navigation--subitems">
								<li class="header--navigation--subitem"><a href="">Editions</a></li>
								<li class="header--navigation--subitem"><a href="">About</a></li>
							</ul>
						</li>
						<li class="header--navigation--item as-mobile-button as-alternative">
							<a href="" class="header--button"><span>Buy Now</span></a>
						</li>
					</ul>
				</nav>
			</div>
		</header>

Show / Hide Code

		<header class="ui header">
			<div class="header--inner">
				<menu class="header--buy as-alternative">
					<button id="header--button" name="header--button" class="header--button">Buy Now</button>
				</menu>
				<div class="header--logo">
					<h1><a href=""><img src="./content/images/header-logo.png" alt="Logo"></a></h1>
				</div>
				<nav class="header--navigation is-opened">
					<span class="header--navigation--title"><span>Menu</span></span>
					<ul class="header--navigation--items">
						<li class="header--navigation--item">
							<a href=""><span>Home</span></a>
						</li>
						<li class="header--navigation--item is-displayed is-active">
							<a href=""><span>Products</span></a>
							<span class="share-caret-down"><span>Open</span></span>
							<ul class="header--navigation--subitems">
								<li class="header--navigation--subitem"><a href="">Munchkin</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin 2 – Unnatural Axe</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin 3 – Clerical Errors</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin 4 – The Need For Steed</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin Zombies</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin Zombies 2 – Armed and Dangerous</a></li>
								<li class="header--navigation--subitem is-active"><a href="">Munchkin Zombies 3 – Hideous Hideouts</a></li>
								<li class="header--navigation--subitem"><a href="">Munchkin Zombies 4 – Spare Parts</a></li>
							</ul>
						</li>
						<li class="header--navigation--item">
							<a href=""><span>Why this Website</span></a>
							<span class="share-caret-down"><span>Open</span></span>
							<ul class="header--navigation--subitems">
								<li class="header--navigation--subitem"><a href="">Editions</a></li>
								<li class="header--navigation--subitem"><a href="">About</a></li>
							</ul>
						</li>
						<li class="header--navigation--item as-mobile-button as-alternative">
							<a href="" class="header--button"><span>Buy Now</span></a>
						</li>
					</ul>
				</nav>
			</div>
		</header>