Sticky menu behavior

I Need Help
1

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 - Numerics Home

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
2

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?

3

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.

4

Hello Romasha, did you find a solution to this?

5

+1 interested here

6

I have the same problem

7

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!

8

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