Main Navigation

RGen landing page use below structure for main navigation.

<!--
************************************************************
* Header
************************************************************ -->
<header class="main-head dark bg-glass-dark-01" data-sticky="y">
	<div class="container pd-0 min-px-h100" data-rgen-sm="pd-lr-20 h-reset">
		
		<div class="row gt0 align-items-center head-row">
			
			<!--=================================
			= Logo section
			==================================-->
			<div class="col-md-3 pos-rel">
				<a class="nav-handle" data-nav=".m-content" data-navopen="pe-7s-more" data-navclose="pe-7s-close"><i class="pe-7s-more"></i></a>
				<div class="header-logo-wrp">
					<a class="header-logo pd-tb-small" href="http://rgenesis.com"><img src="images/logo-light.png" alt="Brand logo"></a>
				</div>
			</div><!-- // END : Column //  -->
			
			<!--=================================
			= Navigation links
			==================================-->
			<div class="col-md-9 align-r m-content">
				<ul class="row gt20 justify-content-md-end mr-0 align-items-center">
					<li class="col-md-auto">
						<nav class="menu-wrp align-l">
							<ul class="menu">
								<li class="menu-item"><a href="#about">About us</a></li>
								<li class="menu-item"><a href="#casestudies">Case studies</a></li>
								<li class="menu-item"><a href="#services">Services</a></li>
								<li class="menu-item"><a href="#portfolio">Our work</a></li>
								<li class="menu-item"><a href="#testimonials">Testimonials</a></li>
							</ul><!-- // END : Navigation links //  -->
						</nav><!-- // END : Nav //  -->		
					</li>

					<li class="col-md-auto" data-rgen-sm="pd-0 pd-t-10 align-c">
						<a href="#popup-content" class="btn btn-white mini set-popup"><i class="far fa-envelope mr-r-5"></i> CONTACT US</a>
					</li>
				</ul>

			</div><!-- // END : Column //  -->

		</div><!-- // END : row //  -->

	</div><!-- // END : container //  -->
</header>
<!-- ************** END : Header **************  -->

 

Apply data-sticky=”y” as par given below code to make it navigation sticky by default.

<!--
************************************************************
* Header
************************************************************ -->
<header class="main-head dark bg-glass-dark-01" data-sticky="y" >
	...
	...
</header>
<!-- ************** END : Header **************  -->

 

Sticky On Scroll

Apply data-sticky-scroll=”y” to make it navigation sticky when page scroll only.

<!--
************************************************************
* Header
************************************************************ -->
<header class="main-head dark bg-glass-dark-01" data-sticky-scroll="y">
	...
	...
</header>
<!-- ************** END : Header **************  -->

 

Below is example code to set logo image. Attributes data-navopen=”pe-7s-more” and data-navclose=”pe-7s-close” use to set icons for mobile menu.

<!--=================================
= Logo section
==================================-->
<div class="col-md-3 pos-rel">
	<a class="nav-handle" data-nav=".m-content" data-navopen="pe-7s-more" data-navclose="pe-7s-close"><i class="pe-7s-more"></i></a>
	<div class="header-logo-wrp">
		<a class="header-logo pd-tb-small" href="http://rgenesis.com"><img src="images/logo-light.png" alt="Brand logo"></a>
	</div>
</div><!-- // END : Column //  -->

 

Useful Classes

  • Apply CSS class .dark to display navigation dark background / on the image.
  • Use helper classes .bg-glass-dark-01, .bg-glass-dark-02, .bg-glass-dark-03, .bg-glass-dark-04, .bg-glass-dark-05, .bg-glass-dark-06, .bg-glass-dark-07, .bg-glass-dark-08, .bg-glass-dark-09, to apply transparent dark background on navigation.
  • Use helper classes .bg-glass-light-01, .bg-glass-light-02, .bg-glass-light-03, .bg-glass-light-04, .bg-glass-light-05, .bg-glass-light-06, .bg-glass-light-07, .bg-glass-light-08, .bg-glass-light-09, to apply transparent light background on navigation.

Related Articles