Gridbox 2.x Beta! try the brand new Joomla! website builder Gridbox Read More

Sticky Header on Scroll with Gridbox. Download Demo Page for Free!

Sticky Header on Scroll with Gridbox

Today we have prepared for you a new tutorial. We gonna show you how to create modern Sticky Header with Gridbox, CSS and JavaScript as on the animation above. Let's Rock your Header and make it beautiful!

Try on Demo!

As you can see on demo, initially header placed at the bottom of the screen. Once you scroll to the header, the header becomes sticky and gets fixed on the page top.

Class Suffix and Custom CSS

In order to place the site navigation at the bottom of the screen, click on the icon Theme Configuration >> Header >> Custom Code and add class suffix sticky-menu 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

.sticky-menu {
    display: block;
    position: absolute;
    top: 100vh;
    transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
    width: 100%;
    z-index: 10;
}

.fixed-sticky-menu {
    position: fixed;
    top: 0;
    transform: none;
    -webkit-transform: none;
}

@media (max-width: 768px) {
	.sticky-menu {
          position: fixed;
          top: 0;
          transform: none;
          -webkit-transform: none;
	}
}

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('.sticky-menu');
        screen = jQuery(window).height() - nav.innerHeight();
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > screen) {
            nav.addClass('fixed-sticky-menu')
        }
        else{
            nav.removeClass('fixed-sticky-menu')
        }
    });
});


ATTENTION!

Results of Javascript code can be visible only at the front-end. Click on the button "Save" and visit your website.

That's all Folks! By the way, you can download demo theme from this tutorial and import it to your Gridbox website.


Demo - Sticky Header on Scroll with Gridbox Download Demo Page

More details about How to import Downloaded Gridbox Theme you can find here: Import Gridbox Page.

See you next week with new Tip and Trick for Joomla! website builder Gridbox.