Hide nav & top menu, logo until scroll

You would have to use our Menu Plus add-on.

Basically, you would add your logo to the menu using the add-on, then you would add this CSS:

.main-navigation {
    display: none;
}

.main-navigation.navigation-clone {
    display: block;
}

In order to do this to the entire header and secondary navigation, you would need to include javascript which adds a class to those elements as you scroll down.

Hmm ok, so it doesn't sound like this is an easy task, as I don't know anything about javascript, bummer!

Something like this might work:

<script>
jQuery( document ).ready( function( $ ) {
    var $document = $(document),
        $header = $('.site-header'),
        $main_nav = $('.main-navigation'),
        $secondary_nav = $('.secondary-navigation'),
        className = 'hasScrolled';

    $document.scroll(function() {
        $header.toggleClass(className, $document.scrollTop() >= 50);
        $main_nav.toggleClass(className, $document.scrollTop() >= 50);
        $secondary_nav.toggleClass(className, $document.scrollTop() >= 50);
    });
});
</script>

That can go in the wp_footer hook in GP Hooks.

Then add this CSS:

.site-header,
.main-navigation,
.secondary-navigation {
    display: none;
}

.site-header.hasScrolled,
.main-navigation.hasScrolled,
.secondary-navigation.hasScrolled {
    display: block;
}

Haven't tested it, but it should work in theory :)

This kind of worked, except that it's doing it on every page. Is there a way to make it so it only happens on the homepage?
Also, the top menu (above the primary navigation) isn't showing up anymore with the addition of the code above.

Add the .home class in front of all other classes (starting with a period) to target only the homepage. You'll want to do this in the javascript and the CSS.

For example: $header = $('.home .site-header')

And: .home .site-header

The primary navigation is being targeted with the above code using the .main-navigation selector.

Hmm if I did it right, it didn't seem to work. Were there other places I should put .home in front of?
The secondary top menu still isn't showing up either.

I tried another approach and I saved the beaver builder row I created for the hero area, and I inserted it into the content settings for the page header. I checked the option to make it fluid, as well as merge with site header option, but this doesn't seem to fix the issue either.

Ideally what I want to do is show my hero header area on the homepage only, with no site logo image and no primary or secondary navigation until the user begins to scroll down.

Can you link me to the site?

http://goo.gl/mVbjui

I took out the codes, do you need them in place to see what's going on?

Yes please :)

Ok, I just put the code and CSS back in there for you

Try this CSS:

.secondary-navigation.hasScrolled {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.site-header.hasScrolled {
    position: fixed;
    top: 40px;
    width: 100%;
    z-index: 9999;
}

In addition to, or replace the other CSS? I replaced the previous CSS. When I go to the home page, it didn't seem to have any effect. Do I need to add that .home anywhere?

In addition to - it will work with the previous CSS to stick those elements to the top of your browser.

Still not working, I don't know where all I'm supposed to put that .home part, but anyways, here is what the CSS I have looks like now:

.home .site-header, .home .main-navigation, .home .secondary-navigation {display: none;}

.home .site-header.hasScrolled, .home .main-navigation.hasScrolled, .home .secondary-navigation.hasScrolled {display: block;}

.home .secondary-navigation.hasScrolled {position: fixed; top: 0; width: 100%; z-index: 9999;}

.home .site-header.hasScrolled {position: fixed; top: 40px; width: 100%; z-index: 9999;}

Does the CSS look right? When I scroll down, I start to see the logo for a split second, but it, along with all of the navigation doesn't appear.