Navigations

Special Navigation bar

Add class .background-black to nav if dark navigation is needed in mobile or tab.

<aside data-zanim-lg='{"from":{"opacity":1,"x":70},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.3}' data-zanim-xs='{"from":{"opacity":1,"y":-48},"to":{"opacity":1,"y":0},"ease":"CubicBezier","duration":0.8,"delay":0.3}' data-zanim-trigger="scroll" data-exclusive="data-exclusive" class="side-nav">
	<nav><a href="index.html" class="brand overflow-hidden"><img src="assets/images/logo-Slick-invert.svg" alt="" width="30" data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.4}' data-zanim-trigger="scroll"/></a>
		<div class="menu overflow-hidden">
			<div data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.5}' data-zanim-trigger="scroll">
				<div class="burger">
					<svg viewBox="0 0 700 700">
						<path id="burger-top" d="M200,250c0,0,220,0,300,0c160,0,188.9,407.1-1.5,217.5C387,356.5,199,168,199,168"></path>
						<path id="burger-middle" d="M200,320h300"></path>
						<path id="burger-bottom" d="M199,469.8c0,0,188-188.5,299.5-299.5C688.9-19.2,660,387.8,500,387.8c-80,0-300,0-300,0"></path>
					</svg>
				</div>
				<div class="hamburger hamburger--emphatic js-hamburger">
					<div class="hamburger-box">
						<div class="hamburger-inner"></div>
					</div>
				</div>
			</div>
		</div>
		<ul class="content">
			<li data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.4}' data-zanim-trigger="scroll"><a href="#"><span class="fab fa-twitter color-white fs-1"></span></a></li>
			<li data-zanim-lg='{"from":{"opacity":0,"x":45},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.4}' data-zanim-trigger="scroll"><a href="#" data-remodal-target="language" class="color-white font-1 ls fw-900 fs--1">EN</a></li>
		</ul>
		<div class="navbar">
			<div class="navbar-content">
				<div class="v-middle">
					<ul>
						<li>
							<a href="JavaScript:void(0)"><span>Dropwdown</span></a>
							<div class="inner-level">...</div>
						</li>
						<li><a href="#"><span>Link</span></a></li>
					</ul>
				</div>
			</div>
		</div>
	</nav>
</aside>

Traditional Navigation bar

Color scheme

Use the following classes or their combinations along with .znav-container to update the navigtation scheme:

1. .znav-white
2. .znav-dark
3. .znav-transperent
4. .znav-semi-transperent

NB: .znav-semi-transperent only works with .znav-white and .znav-dark

<div id="znav-container" class="znav-container znav-dark">
	.....
</div>

<div id="znav-container" class="znav-container znav-dark znav-semi-transperent">
	.....
</div>

Multi-level dropdown menu

Slick has multi-level dropdown menu feature. Nesting the list you can make the multi-level dropdown menu. By default the menu appears at the right side of the corresponding item. If you want to push the menu to the left side, just add.dropdown-push-left class along with .dropdown class.

<ul class="dropdown dropdown-push-left">
	.....
</ul>