How to repair the top navigation bar sticky position?

Issue

I use a WP 5.3 Twenty Seventeen child theme, but I don't want to edit templates, so I added a needed second (in fact it became the first in the displaying order) div wrap section to the top navigation menu with the bellow function. The problem is that I lost after this the fixed position of the menu (it is not sticky anymore now). How to remediate this? I played with the CSS code, but without success. The site in discussion is here.

function my_navigation_top( $slug, $name ) {
    if( $name == 'top' ) { ?>
        --- some content here ---
        </div> <!-- wrap closed -->
        <div class="wrap"> <!-- wrap opened -->
    <?php }
}
add_action( 'get_template_part_template-parts/navigation/navigation', 'my_navigation_top', 10, 2 );

UPDATE

If instead of a second div wrap section I add a simple div section inside the wrap, the problem doesn't appear.

Solution

I am looking at the script file that sets the fixed class (that makes the top nav sticky when scrolling down). (File: twentyseventeen/assets/js/global.js) And It seems the fixed class is not set if the height of the nav is too tall:

    // Set properties of navigation.
    function setNavProps() {
        navigationHeight      = $navigation.height();
        navigationOuterHeight = $navigation.outerHeight();
        navPadding            = parseFloat( $navWrap.css( 'padding-top' ) ) * 2;
        navMenuItemHeight     = $navMenuItem.outerHeight() * 2;
        idealNavHeight        = navPadding + navMenuItemHeight;
        navIsNotTooTall       = navigationHeight <= idealNavHeight;
    }

    // Make navigation 'stick'.
    function adjustScrollClass() {

        // Make sure we're not on a mobile screen.
        if ( 'none' === $menuToggle.css( 'display' ) ) {

            // Make sure the nav isn't taller than two rows.
            if ( navIsNotTooTall ) {

                // When there's a custom header image or video, the header offset includes the height of the navigation.
                if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
                    headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
                } else {
                    headerOffset = $customHeader.innerHeight();
                }

                // If the scroll is more than the custom header, set the fixed class.
                if ( $( window ).scrollTop() >= headerOffset ) {
                    $navigation.addClass( navigationFixedClass );
                } else {
                    $navigation.removeClass( navigationFixedClass );
                }

            } else {

                // Remove 'fixed' class if nav is taller than two rows.
                $navigation.removeClass( navigationFixedClass );
            }
        }
    }

I am not entirely certain what the solution would be. One idea (which is not ideal) is to adapt the .js file and put true between the ( ) instead of navIsNotTooTall on this line:

if ( navIsNotTooTall ) {

If you want to add this change to the child theme, instead of the main theme: Put the changed global.js file in your child-theme directory here: twentyseventeen-child/assets/js/global.js

Then add this to functions.php of the child-theme:

add_action( 'wp_enqueue_scripts', 'override_globaljs_script', 100 );
function override_globaljs_script()
{
    wp_dequeue_script( 'twentyseventeen-global' );
    wp_deregister_script( 'twentyseventeen-global' );

    wp_enqueue_script( 'twentyseventeen-global-child', get_stylesheet_directory_uri() . '/assets/js/global.js' );
}

It will unregister the main theme global.js and register it for the child theme. This is the 'proper' Wordpress way to do it as far as I am concerned.

Answered By - Snuwerd