How to Create One Page Joomla Template

How to Create One Page Joomla Template

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 this: 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 turning 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.

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 depend 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.  


Step 02

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


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"


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.


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


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.


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.


Step 03 

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


Step 03

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


          // 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
          // Smoothscroll animation, who didn't love fancy stuff? :)
          $menu_items.on('click', '>a', function(){
            var target = $(this).prop('hash');
            if(target) {


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


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">


Working Demo


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 Porfolio and link with porfolio section. Simply find our porfolio section ID with developer tool and create porfolio 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 ?


  1. Bootstrap Affix Plugin
  2. Bootstrap ScrollSpy Plugin
  3. Free Joomla Template
Rate this blog entry:
7 Key Elements for High-Converting Landing Page
20 Templates Updated to Joomla 3.3