Sunday, 06 December 2015 18:24

Fixed Header in Gantry Framework

Written by 
Rate this item
(0 votes)

In this article I would like to share with you how to make "fixed header" in Joomla Gantry Framework. How it works. You normally scrolling down, header disappears. From the moment your scrolling reaches certain value, header appears ( animate ) and stays fixed at the top of the website.

Because we are using Joomla and well known gantry framework we can start from creating file within features directory. Is going to be one of the "gantry features". Lets name it fixedheader.php

it starts as usually from opening php tag, normal defined or die. We create class which extends GantryFeature. We assign our feature name to variable. This class contains only init() function.

<?php
/**
 * @package     gantry
 * @subpackage  features
 * @version     1
 * @author      Tomasz Kisielewski
 * @url         tkstudiodesign.com
 * @license     GPL
 */
  
defined('JPATH_BASE') or die();
  
gantry_import('core.gantryfeature');
  
class GantryFeatureFixedheader extends GantryFeature {
    var $_feature_name = 'fixedheader';
     
    function init() {

Within init() we check if fixed-header has been enabled in template control panel:

global $gantry;
        if($gantry->get('fixedheader-enabled')){

Further down we need to add inline javascript which controlls whole thing. We create some variables and we are listening on "on scroll" jquery event.

$gantry->addInlineScript (
        "
		jQuery(document).ready(function(){
        var myheader = jQuery('#rt-header');
		jQuery(window).on('scroll',function(){
        var fromTop = jQuery(document).scrollTop();

Now we are toggling css classes ( adding class down and animated) taking values from templateOptions.xml and we are setting distance from top where scrolling appears. We need also act on menu toggle which appears when width is below full screen.

jQuery('#rt-top-surround #rt-header').toggleClass('down animated ".$gantry->get('fixedheader-effectIn')."',(fromTop>400));
		jQuery('.gf-menu-toggle').toggleClass('menu-toggle-fixed animated" .$gantry->get('fixedheader-effectIn')."',(fromTop>450));
		if (!(jQuery('.menu-block').find('.gf-menu').length>0)&&(myheader.length && myheader.hasClass('down'))){
		jQuery('.layout-mode-responsive .gf-menu-device-wrapper-sidemenu .gf-menu-device-container').css('padding-top','70px');
		jQuery('#rt-header').css('min-height','40px');
     	}

We need also set up minimum height, padding-top and style for mobile layout "layout-mode-responsive .gf-menu-device-wrapper-sidemenu .gf-menu-device-container" we simply need different padding.

else{
		jQuery('.layout-mode-responsive .gf-menu-device-wrapper-sidemenu .gf-menu-device-container').css('padding-top','0px');
		}});});


Now we are done with our "gantry feature" is time to have a look at templateOptions.xml. I placed fixed header inside Menu tab, but you are free to choose more appropriate place.

Of course you need to have animate.css downloaded and placed inside your Joomla Gantry Framework template. Also don't forget that we use custom css class ".down". In my case I placed it into mytemplateName.less . If you are working with css rather than less use your css.

After saving file and refreshing backend we will see:

Read 2293 times