Horizontal Menu with Top nav

Introduction

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

How to Setup

For vertical navigation you have to first add hk-alt-nav class with hk-wrapper.

HTML Structure

<!-- HK Wrapper -->
<div class="hk-wrapper hk-alt-nav">
......
......
<!-- Top Navbar -->
<nav class="navbar navbar-expand-xl navbar-dark fixed-top hk-navbar hk-navbar-alt">
	<a class="navbar-toggle-btn nav-link-hover navbar-toggler" href="javascript:void(0);" data-toggle="collapse" data-target="#navbarCollapseAlt" aria-controls="navbarCollapseAlt" aria-expanded="false" aria-label="Toggle navigation"><span class="feather-icon"><i data-feather="menu"></i></span></a>
	<a class="navbar-brand" href="#">
		<img class="brand-img d-inline-block align-top" src="dist/img/logo-dark.png" alt="brand" />
	</a>
	<div class="collapse navbar-collapse" id="navbarCollapseAlt">
		<ul class="navbar-nav">
			<li class="nav-item dropdown show-on-hover active">
				<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Dashboard
					</a>
				<div class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
					<a class="dropdown-item active" href="index.html">CRM</a>
					<a class="dropdown-item" href="index2.html">Project</a>
					<a class="dropdown-item" href="index3.html">Statistics</a>
				</div>
			</li>
			<li class="nav-item dropdown show-on-hover">
				<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Pages
					</a>
				<div class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
					<div class="sub-dropdown-menu show-on-hover">
						<a href="#" class="dropdown-toggle dropdown-item">Application</a>
						<div class="dropdown-menu open-right-side">
							<a class="dropdown-item" href="chats.html">Chat</a>
							<a class="dropdown-item" href="calendar.html">Calendar</a>
							<a class="dropdown-item" href="email.html">Email</a>
						</div>
					</div>
					<div class="sub-dropdown-menu show-on-hover">
						<a href="#" class="dropdown-toggle dropdown-item">Authentication</a>
						<div class="dropdown-menu open-right-side">
							<div class="sub-dropdown-menu show-on-hover">
								<a href="#" class="dropdown-toggle dropdown-item">Sign Up</a>
								<div class="dropdown-menu open-right-side">
									<a class="dropdown-item" href="signup.html">Cover</a>
									<a class="dropdown-item" href="signup-simple.html">Simple</a>
								</div>
							</div>
							<div class="sub-dropdown-menu show-on-hover">
								<a href="#" class="dropdown-toggle dropdown-item">Login</a>
								<div class="dropdown-menu open-right-side">
									<a class="dropdown-item" href="login.html">Cover</a>
									<a class="dropdown-item" href="login-simple.html">Simple</a>
								</div>
							</div>
							<div class="sub-dropdown-menu show-on-hover">
								<a href="#" class="dropdown-toggle dropdown-item">Recover Pwd</a>
								<div class="dropdown-menu open-right-side">
									<a class="dropdown-item" href="forgot-password.html">Forgot Password</a>
									<a class="dropdown-item" href="reset-password.html">Reset Password</a>
								</div>
							</div>
							<a class="dropdown-item" href="lock-screen.html">Lock Screen</a>
							<a class="dropdown-item" href="404.html">Error 404</a>
							<a class="dropdown-item" href="maintenance.html">Maintenance</a>
						</div>
					</div>
					<a class="dropdown-item" href="profile.html">Profile</a>
					<a class="dropdown-item" href="invoice.html">Invoice</a>
					<a class="dropdown-item" href="gallery.html">Gallery</a>
					<a class="dropdown-item" href="activity.html">Activity</a>
					<a class="dropdown-item" href="faq.html">Faq</a>
				</div>
			</li>
			<li class="nav-item dropdown show-on-hover">
			....
			</li>
			....
			....
		</ul>
	....
	</div>
	....
</nav>
<!-- /Top Navbar -->

For this menu style you have to add hk-navbar-alt class with navbar.

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

​