Balbooa Joomla Gallery 2.2.5 Released

Read More

Animated Resizing Header On Scroll with Gridbox. FreeBox Theme Included!

Animated Resizing Header with Gridbox

Since website navigation is one of the most important elements of your Joomla website, today we gonna continue with headers. In this tutorial, we create an animated fixed header that will resize on mouse scroll.

Once you start scrolling, the website logo and vertical padding of the header section will decrease smoothly. Animation will look great if you have a high header with a large vertical padding, 25px - 50px will be enough to create amazing resizing header.

Demo - Animated Resizing Header On Scroll

The main idea is removing vertical padding of the header section, on mouse scroll. So, before you start, be sure that your main header section has Top and Bottom Padding more than 15px.

Class Suffix and Custom CSS

First of all we need to add Class Suffix for our Header.

Navigate to Header Settings and add class suffix resizing-header in the field Class Suffix.

Open Gridbox CSS Editor.

Gridbox CSS Editor

Copy CSS code below and paste into the Gridbox CSS editor

.ba-item-logo img,
.resizing-header.ba-section {
    transition: all .3s;
    -webkit-transition: all .3s;
}
 
.fixed-header .resizing-header.ba-section {
    background: #15181f !important;
    padding-bottom: 15px !important;
    padding-top: 15px !important;
}

Custom JavaScript

Open Gridbox JavaScript Editor.

Javascript CSS Editor

Copy JS code below and paste into the Gridbox JavaScript editor.

jQuery("document").ready(function($){
    var 
    logo = jQuery('.ba-item-logo img'),
    w = logo.width();
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 20) {
            logo.css({
              "width": w/2
                     });
        } else{
            logo.css({
              "width": w
                     });
        }
    });
});


Demo - Animated Resizing Header with Gridbox

Download Demo Page