Have sub menu replace header

Thank you, Ismael for your comment. This isn’t exactly what I had in mind but it got the juices flowing.

I ended up writing a script that removes the header on scroll. If anyone else is interested in doing so, just paste this into your child’s PHP file. Of note, I am only applying this to the homepage and desktop devices.

/* FADE HEADER BASED ON SCROLL DEPTH */

function add_hide_header() {
    if (is_front_page()) { // Check if it's the homepage
        ?>
        <script>
            jQuery(window).scroll(function(){
                if (window.innerWidth > 1024) { // Only apply on screens wider than 1024px (desktop)
                    var scrollTop = jQuery(this).scrollTop();

                    // Fade out the header when scroll depth is more than 1px
                    if (scrollTop > 1) {
                        jQuery('#header_main').fadeOut(500); // at a speed of .5 seconds
                    } 
                    // Fade in the header when scroll depth is less than 200px
                    else if (scrollTop < 200) {
                        jQuery('#header_main').fadeIn(500); // at a speed of .5 seconds
                    }
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_hide_header');

You can close this case.

I appreciate your help.

-James