Sticky menu behavior

I am using the trial version of Blocs as we are considering moving from Wordpress to Blocs for our website. We are nearly there, but I have a hit a scenario that I am unable to achieve with Blocs and is critical for our shift.

We need 2 menus on our site - a global menu that is available across all pages and a secondary product menu with navigation related only to that product.

This secondary product menu needs to be a sticky menu, that only becomes sticky when the user scrolls and the menu touches the top of the browser window.

Blocs offers a Sticky menu. However, in my trials, the secondary sticky menu I added to my Blocs site, becomes sticky the instant I scroll down.

An implementation of what I want is available on our current site here - https://cynapse.com/numerics

Notice how the main site menu scrolls away and the product menu becomes sticky only once it touches the top of the browser window.

How can I achieve this behavior with the sticky menu in Blocs? I am on the last day of my trial and I’d appreciate any pointers to achieve this. Thanks for all your help!

1 Like

just a thought, haven’t tried it, but could the top menu just be hyperlinks and not a menu as such, then have the menu in a lower block that is sticky?

Thanks for your suggestion.

I tried making the top / global menu just a set of hyperlinks and the secondary menu as sticky, but no luck.

Further, I have completely removed the top global menu and only kept the contextual secondary menu which is sticky, but on a slight scroll down, the menu instantly sticks to the top of the browser window.

Any other ideas would be be appreciated.

Hello Romasha, did you find a solution to this?

+1 interested here

I have the same problem

Hi romasha,

Looking at your site today it seems that you have solved the issue. Could you give us some insights on how you did that?

Thanks!

Okay, that wasn’t too difficult. Here is how I did it:

Below your first navigation bar, add a new bloc and give it the class name secondary-menu.

Then open the page settings and add the following css code to the header area:

<style>

    .secondary-menu {
      z-index: 9999;
      position: relative;
    }

    .stuck {
      position: fixed;
      top:0;
      width: 100%;
    }

</style>

Switch to the footer section using the drop-down-menu and add the following code:

<script>

    var secondaryMenu = document.querySelector(".secondary-menu");
    var fromTop = secondaryMenu.offsetTop;

    document.onscroll = function() {
      if (! secondaryMenu.classList.contains("stuck") && window.pageYOffset >= fromTop) {
        secondaryMenu.classList.add("stuck");
      }
      else if (secondaryMenu.classList.contains("stuck") && window.pageYOffset < fromTop){
        secondaryMenu.classList.remove("stuck");
      }
    };

</script>

That’s basically it. Now you can add your menu items to the bloc. Links, buttons, menus, logos …

Cheers

1 Like