Horizontal Menu Style

Introduction

In Pangong we provided you three type of menu style first one in Vertical navigation.

How to Setup

For Horizontal navigation you have to first add hk-horizontal-nav class with hk-wrapper.

HTML Structure

<!-- HK Wrapper -->
<div class="hk-wrapper hk-horizontal-nav">
......
......
<!--Horizontal Nav-->
<nav class="hk-nav hk-nav-dark">
	<a href="javascript:void(0);" id="hk_nav_close" class="hk-nav-close"><span class="feather-icon"><i data-feather="x"></i></span></a>
	<div class="nicescroll-bar">
		<div class="navbar-nav-wrap">
			<ul class="navbar-nav flex-row">
				<li class="nav-item active">
					<a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#dash_drp">
						<span class="feather-icon"><i data-feather="activity"></i></span>
						<span class="nav-link-text">Dashboard</span>
					</a>
					<ul id="dash_drp" class="nav flex-column collapse collapse-level-1">
						<li class="nav-item">
							<ul class="nav flex-column">
								<li class="nav-item active">
									<a class="nav-link" href="index.html">CRM</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="index2.html">Project</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="index3.html">Statistics</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				....
				....
				<li class="nav-item">
					....
				</li>

				<li class="nav-item">
					....
				</li>
				<li class="nav-item">
					<a class="nav-link" href="https://hencework.gitbook.io/pangong/" target="_blank">
						<span class="feather-icon"><i data-feather="book"></i></span>
						<span class="nav-link-text">Documentation</span>
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link link-with-badge" href="https://hencework.gitbook.io/pangong/changelog" target="_blank">
						<span class="feather-icon"><i data-feather="eye"></i></span>
						<span class="nav-link-text">Changelog</span>
						<span class="badge badge-success badge-sm badge-pill">v 1.0</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div id="hk_nav_backdrop" class="hk-nav-backdrop"></div>
<!--/Horizontal Nav-->

For light & dark menu you can add hk-nav-lightor hk-nav-darkwithhk-navclass.

For Scrollable Navigation please add scrollable-nav class with hk-wrapper.