Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Hide and show nav on scroll

by | 5 Apr,2017 | DIVI, Tutorials, Webdesign

This tutorial come once more after a question posted on facebook group Divi Theme Tutorials and relies on headroom.js library.

Maybe you didn’t noticed that the nav bar of my website is no more fixed.

If you scroll down the nav will hide, and will come back when you scroll up, so you are able to see the nav when you’re at the middle of the page just right after you start to scroll up.

How can we achieve this in DIVI ?

  • First, we need to make sure navigation is set up to “fixed” inside DIVI theme options.Go to Divi options :
    And activate fixed nav :
  • Then, we need to add the headroom.js library to our child theme.
  • Next, we need to add the init code to target the header
  • We also need to add some css for slide – swing – flip – bounce animations

To make it easy, i packed all files you need inside an archive that you can download HERE.

Once the archive opened, you will have a folder called divi-headroom.

Inside the folder you will find 2 folders : JS and CSS.

Copy the folders JS and CSS inside your child theme folder.

Now, you need to open your child theme functions.php with editor and replace the following code :

function my_enqueue_assets() { 
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );  
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );

with the following code to enqueue all our scripts (including DIVI theme style.css) :
function my_enqueue_assets() { 
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
  wp_enqueue_style( 'headroom-style', get_stylesheet_directory_uri().'/css/headroom.css' );    
    wp_enqueue_script( 'inithead.js', get_stylesheet_directory_uri().'/js/inithead.js','','',true);
    wp_enqueue_script( 'js-headroom', get_stylesheet_directory_uri().'/js/headroom-min.js','' ,'',true );
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );

You’re almost done and you should already see your nav hide on scroll down and show again on scroll up. The next step is about customization of the offset and animation.

You can try different values live on headroom playroom live demo.

Once you have chosen the effect and offset you want, you’ll need to open the file inithead.js located inside your child theme folder –> JS folder and replace offset, tolerance, initial, pinned and unnpined values with the values of your choice.

Here are the different available animation classes :

Slide (default)

"pinned": "slideDown",
"unpinned": "slideUp"

"pinned": "swingInX",
"unpinned": "swingOutX"

"pinned": "flipInX",
"unpinned": "flipOutX"

"pinned": "bounceInDown",
"unpinned": "bounceOutUp"

That’s all. Feel free to ask if you need help 🙂