[Resolved] Hide Header (Site Logo + Nav Menu) Until Scroll On Front Page

[AJ]

Hi, I was hoping to get some help on this buildout.

I’d like the front page header, site logo + nav to be hidden until the user scrolls past the background image in the first section.

Very similar to what this user wanted to do. However, it’s a bit outdated and I’m not sure where to begin.
https://generatepress.com/forums/topic/hide-nav-top-menu-logo-until-scroll/

Have GP Premium + Elementor Pro.

Super noob when it comes to any custom CSS or JS.

Thanks!

[Tom]

It looks like you’re using Elementor to build your header, so we can’t use anything built into GP to do this.

I think you would have to use custom javascript to detect when the first section has been scrolled passed.

Custom javascript is hard, and a not really within the scope of forum support unfortunately.

After a quick search, you could maybe try this CSS:

.elementor-location-header {
    display: none;
}

.elementor-location-header.show-me {
    display: none;
}

Then this javascript:

window.addEventListener("scroll", function() {
    var elementTarget = document.querySelector( '.elementor-location-header' );

    if ( window.scrollY > ( elementTarget.offsetTop + elementTarget.offsetHeight ) ) {
        elementTarget.classList.add( 'show-me' );
    } else {
        elementTarget.classList.remove( 'show-me' );
    }
} );

Not sure if it will work, but it’s worth a shot.

[AJ]

Where/which file would you add the JavaScript to?

[Tom]

You could:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook as wp_footer
3. Add this as the hook content:

<script>
window.addEventListener( 'scroll', function() {
    var elementTarget = document.querySelector( '.elementor-location-header' );

    if ( window.scrollY > ( elementTarget.offsetTop + elementTarget.offsetHeight ) ) {
        console.log('show');
        elementTarget.classList.add( 'show-me' );
    } else {
        console.log('hide');
        elementTarget.classList.remove( 'show-me' );
    }
} );
</script>

[AJ]

Hrmmm. Implemented the CSS as well as the JavaScript using the hook element.

Didn’t work.

It did hide the header, though. It just won’t appear during scroll.

I know you said that custom javascript is hard, and a not really within the scope of forum support, but any additional help would be greatly appreciated. If not, I understand.

Thanks again, you rock either way!

[Tom]

I just added some debugging stuff to the script above: https://generatepress.com/forums/topic/hide-header-site-logo-nav-menu-until-scroll-on-front-page/#post-880655

Can you re-add it and let me know so I can take a look?

Thanks!

[AJ]

added

[Tom]

Is it possible to give your Elementor header an ID?

[AJ]

Added elementor-location-header as the ID.

However, would this be infinitely easier and more productive if we used the GP header?

The header layout I’m wanting is pretty simple.

Logo on the left. full-width nav.

Haven’t decided what I want it to look like on mobile, yet.

[AJ]

http://prntscr.com/nhnt11

[Tom]

I’m not seeing an ID on the containing element. If you used the GP header we could try using the ID that comes with it.

[AJ]

Alright. I’ve disabled the Elementor header and I am using the GP header.

I currently have this JavaScript at Hook Element set as wp_footer

<script>
window.addEventListener("scroll", function() {
    var elementTarget = document.querySelector( '.elementor-location-header' );

    if ( window.scrollY > ( elementTarget.offsetTop + elementTarget.offsetHeight ) ) {
        elementTarget.classList.add( 'show-me' );
    } else {
        elementTarget.classList.remove( 'show-me' );
    }
} );
</script>

I then have the following CSS

.elementor-location-header {
    display: none;
}

.elementor-location-header.show-me {
    display: none;
}

I’m sure we’re going to have to tweak this a bit now.

[Tom]

Let’s try this instead:

#site-navigation,
#sticky-navigation {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

#sticky-navigation.show-me {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: visible;
}

Then add this as your javascript:

<script>
var topofDiv = jQuery( '.elementor-element-c023fe1' ).offset().top;
var height = jQuery( '.elementor-element-c023fe1' ).outerHeight();

jQuery( window ).scroll( function() {
    if ( jQuery( window ).scrollTop() > ( topofDiv + height ) ) {
       jQuery( '#sticky-navigation' ).addClass( 'show-me' );
    } else {
       jQuery( '#sticky-navigation' ).removeClass( 'show-me' );
    }
} );
</script>

[AJ]

Updated the code.

Header/Nav is now hidden but does not reappear when scrolling past the first section.

[Tom]

Getting closer I think! Can you try the updated code?

[Author]

Posts