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 ************** -->
Sticky Navigation
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 ************** -->
Mobile Menu & Logo
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.