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

Home Forums Support Hide Header (Site Logo + Nav Menu) Until Scroll On Front Page

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #879671
    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!

    GeneratePress 2.2.2
    GP Premium 1.8.1
    #879753
    Tom
    Lead Developer
    Lead Developer

    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.

    #880542
    AJ

    Where/which file would you add the JavaScript to?

    #880655
    Tom
    Lead Developer
    Lead Developer

    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>
    #880779
    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!

    #881043
    Tom
    Lead Developer
    Lead Developer

    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!

    #881343
    AJ

    added

    #881519
    Tom
    Lead Developer
    Lead Developer

    Is it possible to give your Elementor header an ID?

    #881586
    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.

    #881597
    AJ
    #881763
    Tom
    Lead Developer
    Lead Developer

    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.

    #881803
    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.

    #882365
    Tom
    Lead Developer
    Lead Developer

    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>
    #882434
    AJ

    Updated the code.

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

    #882572
    Tom
    Lead Developer
    Lead Developer

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

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.