These days, websites are much more interactive than what they were even just a couple of years ago. Quickly evolving technology brings about some really nice solutions which, themselves, set new trends in the Web design industry.
One of these trends, which actually became very popular, is the fixed header on scroll. A fixed header is a section of the page that moves with you as you scroll down the page.
The process outlined in this guide has since been rendered obsolete after continued improvement and development of Gantry 5. There is a much easier process in place for achieving this, and you can find out more about it through this blog post.
There is a good reason for its popularity - the fixed header is a great UX improvement as it allows the visitor to browse the website without the need to scroll to the top of the page in order to see the navigation controls.
In this article, I will show you how to implement the Fixed Header in Gantry 5's Hydrogen template using the well-known headroom.js script.
Headroom.js is a lightweight, high-performance JavaScript widget (with no dependencies!) that allows you to react to the user's scroll. It is licensed under the MIT License so you can use it in both personal and commercial projects.
So, let's get started...
Download headroom.js
You can download Headroom.js from Github. You can also just load the script from a CDN, but I always prefer to have all my scripts run locally in case the CDN is not available. However, there are some benefits of loading your scripts remotely, but this is beyond the scope of this tutorial.
Once you download it, you need to unzip the headroom.js-master.zip file. You will find several files and folders, but the one you need is called dist. In the dist folder, you will see three different versions of headroom.js - one written in Angular, one in jQuery and one in pure JavaScript. I strongly recommend the pure JS one, headroom.min.js, as you will not need to load additional JS libraries which will add more weight to your website.
Copy headroom.js in Hydrogen
As described in the Gantry5 Documentation, you need to keep all your modifications and additions in the SITE_ROOT/templates/g5_hydrogen/custom/ directory so they do not get overwritten when you update the template.
Then, create the SITE_ROOT/templates/g5_hydrogen/custom/js/ directory structure and copy the headroom.min.js file there.
Loading headroom.js in Hydrogen
Now you need to load the script in the template. You can do that with the Custom CSS/JS atom from the Layout Manager, but since it is a global script that needs to be loaded on all pages, it is probably a better idea to hard code it in the template. For this, we need to create a template override of the page.html.twig file:
- Create the
SITE_ROOT/templates/g5_hydrogen/custom/engine/templates/directory structure. - Go to
SITE_ROOT/media/gantry5/engines/nucleus/templates/and copy thepage.html.twigfile. - Paste the
page.html.twigfile in the directory structure you created in step 1. - Edit the
SITE_ROOT/templates/g5_hydrogen/custom/engine/templates/page.html.twigfile and add the following code on line 61, just below themain.jsone:
<script type="text/javascript" src="{{ url('gantry-theme://custom/js/headroom.min.js') }}"></script>
<script>
// grab an element
var myElement = document.querySelector("#g-navigation");
// construct an instance of Headroom, passing the element
var headroom = new Headroom(myElement);
// initialise
headroom.init();
// grab an element
var myElement = document.querySelector(".g-offcanvas-toggle");
// construct an instance of Headroom, passing the element
var headroom = new Headroom(myElement);
// initialise
headroom.init();
</script>As you can see in the above code, we are making the Navigation section and the Offcanvas toggle sticky. If your menu is in the Header section (not in the Navigation section) then you need to replace #g-navigation with #g-header in the code above.
Now you have headroom.js implemented in your website. If you inspect your website with Firebug or Chrome Inspect Element, you should see the headroom classes being added.
Adding the Style (SCSS)
Now, you need to add the style which will actually tell the browser that the particular element should be fixed/sticky when the visitor starts scrolling:
First: Create the custom.scss file as described in the Gantry Documentation and paste the following code there:
@import "dependencies";
#g-navigation.headroom--not-top {
position: fixed;
width: 100%;
top: 0;
z-index: 1001;
left: 0;
}
.g-offcanvas-toggle.headroom--not-top {
position: fixed;
z-index: 1002;
}
.g-offcanvas-open {
#g-navigation.headroom--not-top {
left: $offcanvas-width;
}
.g-offcanvas-toggle.headroom--not-top {
left: $offcanvas-width + 0.7rem;
}
}
#g-navigation.headroom--not-top, .g-offcanvas-toggle.headroom--not-top {
@include transition(all 0.3s);
}Or if you want to have a more advance behavior you can use the following code instead of the above one:
@import "dependencies";
//Fixed Header On Scroll - Advanced
.headroom {
@include transition(transform 200ms linear);
}
.headroom--pinned {
@include transform(translateY(0%));
}
.headroom--unpinned {
@include transform(translateY(-100%));
}
#g-navigation.headroom--not-top {
position: fixed;
width: 100%;
top: 0;
z-index: 1001;
left: 0;
}
.g-offcanvas-toggle.headroom--not-top {
position: fixed;
z-index: 1002;
&.headroom--unpinned {
top: 0;
}
}
.g-offcanvas-open {
#g-navigation.headroom--not-top {
left: $offcanvas-width;
}
.g-offcanvas-toggle.headroom--not-top {
left: $offcanvas-width + 0.7rem;
}
}
#g-navigation.headroom--not-top, .g-offcanvas-toggle.headroom--not-top {
@include transition(all 0.3s);
}Second: Recompile the CSS for the "Base" Outline in the Gantry 5 administrator
There you go! You now have a very nice and clean fixed Navigation/Header on scroll.
This has been a guest blog post written by Ivo Valkov (JoomFX), a Web developer and member of the Gantry community.