One Page Website is one of the hottest and newest trend in web Design. The fascinating trend are getting popular for number of factors, but the most important is: All the necessary contents of a business can be displayed on the same page instead of using lot of pages.

We received numerous requests from our client about how to turn ZenithII joomla template as one page template. Here is our process to turn a standard Joomla template to one page template. Creating one page website in Joomla is pretty easy. To learn this process, you required basic understanding of CSS and Developer tool such as : Chrome developer tool or Firebug. In this tutorial we'll use Chrome developer tool.

If you wish, check our latest post for creating one page template -A Complete Guide to Create Marketplace Ready Onepage Joomla Template

Before digging deeper we need to know what is the key elements on any one page template:

  1. Sticky Header
  2. Scrollspy - It is for automatically updating nav targets based on scroll position.
  3. Smooth Scroll - It is for scrolling between section smoothly
  4. Some animation on scrolling ( optional )

One Page Website is one of the hottest and newest trend in web Design. The fascinating trend are getting popular for number of factors, but the most important is: All the necessary contents of a business can be displayed on the same page instead of using lot of pages.

We received numerous requests from our client about how to turn ZenithII joomla template as one page template. Here is our process to turn a standard Joomla template to one page template. Creating one page website in Joomla is pretty easy. To learn this process, you required basic understanding of CSS and Developer tool such as : Chrome developer tool or Firebug. In this tutorial we'll use Chrome developer tool.

If you wish, check our latest post for creating one page template -A Complete Guide to Create Marketplace Ready Onepage Joomla Template

Before digging deeper we need to know what is the key elements on any one page template:

  1. Sticky Header
  2. Scrollspy - It is for automatically updating nav targets based on scroll position.
  3. Smooth Scroll - It is for scrolling between section smoothly
  4. Some animation on scrolling ( optional )

Everything is dependent on content and i assume you already have some content on your Homepage to implement One page style. In this tutorial we’ll use our latest ZenithII template which is Free and easy to use.

Sticky Header

Creating Sticky header is very simple. You do not need to write single line of code. Just follow few steps

Step 01

Open ZenithII from your preferred browser. Find out the header wrapper element inspecting through chrome dev tool.  

Tuts1.png

Step 02

Log in to Joomla admin panel and head to the Extensions > Template Manager. Click on Tx_zenith_ii from Template column.

Tuts2.png

Step 03

Click index.php from the Editor tab. Find our header wrapper element that we inspected in first step, paste this following code and hit Save & Close button.

data-spy="affix" data-offset-top="0"

Tuts3.png

Step 04

Go to the Template Manager again and click Tx_Zenith_II - Default from Style column, get into the Developer tab, paste the following code in Custom CSS box and hit save button.

Code:

#top {
width: 100%;
z-index: 999;
}
.nav > li > a:hover{ background: transparent; }

Tuts5.jpg

Scrollspy and Smooth Scroll integration

Integrating Scrollspy in menu is as simple as we made Sticky Header. The process is comprised of few steps below:

Step 01

We'll create a menu group for scrollspy. Click Menus > Menu Manager > Add New Menu . For our tutorial we'll create a menu called 'Scrollable' but you can name it as you prefer.

Tuts9.png

Step 02

Back to the front-end. We’ll use developer tool, and find out the section ID that we want to link with menu item. And add menu item with external link in Scrollable menu.

In the image below you can see, We have a section ID utitlity and we'll refer this as Service in menu. Now, head to the backend, get into Scrollable menu from Menus and create new menu item called Service. Select External URL for Menu Item Type and use that section id utility with # in Link input box and hit save.

Tuts3.png

Step 03 

Head to Template Manager and open Tx_Zenith_II - Default from Style column, Get into Menu Tab, select scrollable from Menu group

Tuts11.jpg

Step 03

Now click on Developer tab, paste the follow code in Custom Javascript and hit Save and Close.

Code

        jQuery(document).ready(function($){
          // Lets cache some vriable
          var $menu = $('.ex-menu > ul.l1'),
              $menu_items = $('ul.l1 > li');
          // Add .nav class to menu, dammm bootstrap is tightly itegrate with it
          $menu.addClass('nav');
          // Smoothscroll animation, who didn't love fancy stuff? :)
          $menu_items.on('click', '>a', function(){
            var target = $(this).prop('hash');
            if(target) {
             event.preventDefault();

             $menu_items.removeClass('active');
             $(this).parent().addClass('active');

             $('html, body').animate({
              scrollTop: $(target).offset().top - $('#top').height()
             }, 500);
            }
          });
        });

Tuts13.png

Step 04

Click on Tx_zenith_ii from Template column, paste the following codes in body element in index.php file. And hit Save & Close button

data-offset="180" data-spy="scroll" data-target=".ex-menu">

Tuts12.jpg

Working Demo

Conclusion

In this tutorial we have only added single menu item service menu but you are not limited. We can add many menus as we mentioned in step 2.

Such as: you want to add new menu item Portfolio and link with portfolio section. Simply find our portfolio section ID with developer tool and create portfolio menu item with external link.

Scrolling animation effect requires a dedicated tutorial that why we did cover in this tutorial. Hoping to cover in next tutorial.Stay connected.

Have you found this tutorial helpful ?

Resources:

  1. Bootstrap Affix Plugin
  2. Bootstrap ScrollSpy Plugin
  3. Free Joomla Template