Gridbox 2.x Beta! try the brand new Joomla! website builder Gridbox 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.

Try on Demo!

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 10px.

Class Suffix and Custom CSS

First of all we need to add Class Suffix for our Header. Navigate to: Theme Configuration >> Header >> Custom Code and add class suffix resizing-header in the field Class Suffix.

Open Gridbox CSS editor by the clicking on the button "Open Editor". Copy CSS code below and paste into Gridbox CSS editor

.ba-item-logo img,
.resizing-header .ba-section {
    transition: all .3s;
    -webkit-transition: all .3s;
}

.resizing-header.slim-menu .ba-section {
    background: #15181f !important;
    padding-bottom: 15px !important;
    padding-top: 15px !important;
}

.resizing-header .ba-section .hide-logo-column {
    align-items: center;
    display: flex;
}

Custom JavaScript

Click on the icon Theme Configuration >> Body >> Custom Code and open JavaScript editor by the clicking on the button "Open Editor".

Copy JS code below and paste into Gridbox JavaScript editor.

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


ATTENTION!

Results of Javascript code can be visible only in the front-end. To see results you need to click on the button "Save" and visit your website.

Demo - Animated Resizing Header with Gridbox Download Demo FreeBox Theme