Mobile menu reveal on scroll up

headroom.js works like a charm.
CSS

.headroom {
  will-change: transform;
  transition: transform 200ms linear;
}
.headroom--pinned {
  transform: translateY(0%);
}
.headroom--unpinned {
  transform: translateY(-100%);
}
.headroom--unpinned--action {
  transform: translateY(calc(-257%));
}

JS

window.onload = function () {

  
    var mainHeader = document.querySelectorAll("header")[0];

    var headroomMain = new Headroom(mainHeader, {
        "offset": 60,
        "tolerance": 10,
        "classes": {
            "initial": "headroom",
            "pinned": "headroom--pinned",
            "unpinned": "headroom--unpinned"
        }
    });

    headroomMain.init();
};

helper-main-menu.php (includes/helper-main-menu.php)

<header id='header' class='all_colors header_color  headroom <?php avia_is_dark_bg('header_color'); echo " ".$headerS['header_class']; ?>' <?php avia_markup_helper(array('context' => 'header','post_type'=>'forum'));?>>

You must download and add headroom.js library.

• This reply was modified 7 years, 11 months ago by talawar.

Hi @talawar,

thanks for your input!

I tried to follow your steps, but it’s not working yet.

I put the CSS into my child themes style.css and modified helper-main-menu.php as you suggested.

Then i am not so sure, if i did the following right. I uploaded Headroom.js to enfold-child/js/ and added your custom JS to a new file. I tried to register both files vie child-themes functions.php ( as suggested here https://kriesi.at/support/topic/custom-js/ ).

enfold-child/functions.php:

wp_register_script( 'sw_custom_java', $template_url.'/js/SW_custom_js.js', 'jquery', "1", true);
wp_register_script( 'headroom_js', $template_url.'/js/Headroom.js', 'jquery', "1", true);

wp_enqueue_script( 'sw_custom_java' );
wp_enqueue_script( 'headroom_js' );

any ideas, what i did wrong?

Thanks!

Hi @Mike,

thanks for you reply. Although i understand, that third party scripts are not your business, could you say, wether my approach to install a custom JS from within the child-theme is making sense?

I am trying to do the custom JS include within the child-theme via child-theme/functions.php and child-theme/js/ for the JS Files (so that i don’t loose too much on a theme update). Are my enqueueing scripts making any sense in general for this setup (regardless if the scripts itself are working)? Is $template_url.’ referencing to “…/enfold/” or to “…/enfold-child/” ?

Hopefully @talawar might find the time to get back on this.

Best Regards,

Stefan

@thatsmyname in your child’s functions.php add the headroom.js before the custom.js (‘SW_custom_js.js’ in your case.)
NOTE: Code below uses custom.js not SW_custom_js.js.

function custom_function() {
	wp_enqueue_script( 'headroom', get_stylesheet_directory_uri() . '/js/headroom.js', false, NULL, 'all');
	wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), 2, true);
}

hi @talawar, are you setting any specifics via the enfold theme settings ui? i tried it with normal and transparent headers set to sticky and unsticky.

it’s not working yet, but the headroom class is pointing to the right header, since the full header disappears with:
.headroom { display: none !important; }

so i am not sure wether the code is running but interfering with other theme settings, or if it’s not running at all.

any ideas regarding possible interference?

Best Regards,

Stefan

i found out, that the custom.js and headroom.js are running by placing prompt(); messages at several points.

and i tried, similar as on http://wicky.nillia.ms/headroom.js/, to take simpler actions:

.headroom--pinned { display: block !important; }
.headroom--unpinned { display: none !important; }

i set offset and tolerance to 0 in the custom.js, so the “display: none” part should have immediate effect. nothing happens so far.

finally it works on desktops.

two things were wrong. i had the wrong headroom.js file and it needs a sticky header. so next thing will be, to get it to work on mobile.

@Thatsmyname: Did it also work on desktop with a mobile menu (burger)? That’s where I get stuck…
And which headroom.js did you use? Thanks!

Hi @ravicski,

since it is one year ago that i tried it last time, i am not sure anymore what i did. Most probably i didn’t get it to work on mobile or it was too unstable regarding all those interfering theme settings.

I think i didn’t get past the point, where it worked with the desktop header but not with the mobile header. And since i want my site to be as stable as possible, the whole .js workaround approach seemed to much for what it was supposed to achieve.

Sorry for not having more details.

Best Regards, Stefan

This would be a great feature to add. Looks like a thing many new sites are adding. Example: mintz.com