Geniux offers different options of full screen and full width header hero sliders, the sliders used are:
The custom header with hero slider consists of two basic elements:
Go to (Geniux/blocks/sliders) to see all the examples.
This is an example of full screen Hero Slider (Flexslider) with transparent to white navigation:
<!-- =================== === START HEADER === ==================== --> <header> <!-- ========================= === START NAVIGATION === ========================== --> <nav class="navbar navbar-default navbar-fixed no-background white bootsnav" data-spy="affix" data-offset-top="100"> <!-- Start Top Search --> <div class="top-search"> <div class="container"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" class="form-control" placeholder="Search"> <span class="input-group-addon close-search"><i class="fa fa-times"></i></span> </div> </div> </div> <!-- End Top Search --> <div class="container"> <!-- Start Atribute Navigation --> <div class="attr-nav"> <ul> <li class="search"><a href="#"><i class="fa fa-search"></i></a></li> <li class="side-menu"><a href="#"><i class="fa fa-bars"></i></a></li> </ul> </div> <!-- End Atribute Navigation --> <!-- Start Header Navigation --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="index.html">GENIUX</a> </div> <!-- End Header Navigation --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav navbar-right" data-in="fadeIn" data-out="fadeOut"> <!-- Active Page --> <li class="active"><a href="#">Home</a></li> <li><a href="#">Company</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div> <!-- Start Side Menu --> <div class="side"> <a href="#" class="close-side"><i class="fa fa-times"></i></a> <div class="widget"> <h6 class="title">Our Company</h6> <ul class="link"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="widget"> <h6 class="title">Additional Links</h6> <ul class="link"> <li><a href="#">Product Info</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Site Map</a></li> <li><a href="#">Support</a></li> <li><a href="#">Therms of Use</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </div> </div> <!--/ End side menu --> </nav> <!-- ========================= ===/ END NAVIGATION === ========================== --> <!-- ============================== === START HERO FULLSCREEN === =============================== --> <div class="hero"> <!-- =========================== === START FLEXSLIDER === ============================ --> <div class="flex-content"> <div class="flex-container"> <div class="flexslider"> <ul class="slides"> <!-- Start slide 1 --> <li style="background-image: url(assets/images/demo-img/hero-bg.jpg)"> <!-- Overlay --> <div class="overlay dark--6"></div> <!-- Start slider caption --> <div class="slider-caption"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-uppercase">Welcome to <span>Geniux</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod<br>tempor incididunt ut labore et dolore magna.</p> <h3 class="m-t-30"> <a href="#" class="gnx-btn btn-border-white btn-rounded hidden-xs" role="button">Learn More</a> <a href="#" class="gnx-btn btn-border-white btn-rounded hidden-xs" role="button">Purchase Now</a> </h3> </div> </div> <!--/ .row --> </div> <!--/ .container --> </div> <!--/ .slider-caption --> <!-- Scroll-to bouncing arrow --> <div id="scroll-1" class="single-page-nav hidden-sm hidden-xs"> <a class="arrow bounce up-30" data-scroll href="#intro"></a> </div> </li> <!--/ End slide 1 --> <!-- Start slide 2 --> <li style="background: url(assets/images/demo-img/hero-bg.jpg)"> <!-- Overlay --> <div class="overlay dark--6"></div> <!-- Start slider caption --> <div class="slider-caption"> <div class="container"> <div class="row"> <div class="col-md-12 caption-left"> <h1 class="text-uppercase">Welcome to <span>Geniux</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p> <h3 class="m-t-30"> <a href="#" class="gnx-btn btn-border-white btn-rounded hidden-xs" role="button">Start The Tour</a> </h3> </div> </div> <!--/ .row --> </div> <!--/ .container --> </div> <!--/ .slider-caption --> <!-- Scroll-to bouncing arrow --> <div id="scroll-2" class="single-page-nav hidden-sm hidden-xs"> <a class="arrow bounce up-30" data-scroll href="#intro"></a> </div> </li> <!--/ End slide 2 --> <!-- Start slide 3 --> <li style="background: url(assets/images/demo-img/hero-bg.jpg)"> <!-- Overlay --> <div class="overlay dark--6"></div> <!-- Start slider caption --> <div class="slider-caption"> <div class="container"> <div class="row"> <div class="col-md-12 caption-right"> <h1 class="text-uppercase">Welcome to <span>Geniux</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p> <h3 class="m-t-30"> <a href="#" class="gnx-btn btn-border-white btn-rounded hidden-xs" role="button">Start The Tour</a> </h3> </div> </div> <!--/ .row --> </div> <!--/ .container --> </div> <!--/ .slider-caption --> <!-- Scroll-to bouncing arrow --> <div id="scroll-3" class="single-page-nav hidden-sm hidden-xs m-b-30"> <a class="arrow bounce up-30" data-scroll href="#intro"></a> </div> </li> <!--/ End slide 3 --> </ul> </div><!--/ .flexslider --> </div><!--/ .flex-container --> </div><!--/ .flex-content --> <!-- =========================== ===/ END FLEXSLIDER === ============================ --> </div> <!-- ============================== === END HERO FULLSCREEN === =============================== --> </header> <!-- ================== ===/ END HEADER === =================== -->
You can choose to use a different hero slider, just copy the preferred code example from the blocks/sliders demo page and replace/overwrite the header portion of code.
Full screen hero sliders use images of 1920x1080 pixels.
To add your images in the flexslider demo slides, go to folder (Geniux/assets/images).
Inside the images folder you will find a folder called "demo-img" that contains empty images.
Create a new folder, for example "my-images", (is a best pratice to group the images by category) then add your images to the my-images folder.
<!-- Start slide 1 --> <li style="background-image: url(assets/images/demo-img/hero-bg.jpg)">
Replace the name of the images with your image path name, see image bellow for more detail;
<!-- Start slide 1 --> <li style="background-image: url(assets/images/my-images/your-image-name.jpg)">
Important: Please note that the template does not include images in the source zip file.
The images used in Geniux demo version are only for demo purpose.