[Support request] Sticky Secondary Navigation hiding on scroll

Home Forums Support [Support request] Sticky Secondary Navigation hiding on scroll

Home Forums Support Sticky Secondary Navigation hiding on scroll

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2174440
    Szymon

    Hello,
    I can’t make sticky secondary navigation hiding on scroll.

    1. to make it sticky i used a css code provided by you:

    .secondary-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }

    The main problem is to hide it on scroll as the primary menu does.

    I tried alternative solution like removing secondary menu then adding it inside the primary menu block with code below, but it looks improperly

    add_action( 'wp', function() {
        remove_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 7 );
        add_action( 'generate_after_primary_menu', 'generate_add_secondary_navigation_after_header', 8 );
    } );
    #2174852
    Ying
    Staff
    Customer Support

    Hi there,

    Unfortuanly secondary navigation doesn’t have the sticky option.

    I would recommend to try using the navigation as header option at customizer > header with the PHP snippet you are using.

    Then add this CSS:

    nav#secondary-navigation {
        width: 100%;
    }
    #2188493
    Szymon

    Unfortunately it doesn’t work for me.

    I tried make secondary nav sticky with css:

    .secondary-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 59px;
        transition: top 0.3s;
    }
    
    @media only screen and (max-width: 768px){
       .secondary-navigation {
            top: 110px;
        }
    }

    and it works. Hiding on scroll was needed so i simply added a javascript:

    <script>
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("secondary-navigation").style.top = null;
      } else {
        document.getElementById("secondary-navigation").style.top = "-40px";
      }
      prevScrollpos = currentScrollPos;
    }
    </script>

    so it works a little bit tricky and it would be acceptable if not an extra problem i cannot solve ;(
    It works fine on desktop and tablet.

    Problem is on smallest devices…
    When cart is empty everything looks fine, but when i add a product the added item’s value appears next to the cart icon. It takes more space causing breaking it to the new line then secondary menu covers buttons underneath.

    Any idea how to improve the code or maybe another solution?
    Much thanks for any help <3

    Empty cart secondary nav sticky:
    empty cart secondary sticky menu

    Filled with some product cart secondary nav sticky:
    filled cart scondary nav sticky

    #2188572
    David
    Staff
    Customer Support

    Hi there,

    you can try reducing the menu font-size, and the menu item width on mobile to see if you can keep all items on the same line.

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