Dropdown submenu disappearing on scroll

We’ve implemented the Walker Nav Menu, and have nice dropdown submenus on our site.

However, when a user scrolls down the page, the dropdown submenu disappears.

Here’s a GIF of the issue

I’ve noticed the div with a class of dropdown-menu also has this attribute:
x-placement="bottom-start"
…and when the menu disappears on scrolling, the attribute changed to:
x-placement="top-start".

Similarly, the style attribute of the same div changes from:
position: absolute; transform: translate3d(0px, 60px, 0px); top: 0px; left: 0px; will-change: transform;

(60px being the height of the menu), to:

position: absolute; transform: translate3d(0px, -257px, 0px); top: 0px; left: 0px; will-change: transform;

…upon scroll (the -257 updates to however far down the page the user has scrolled).

I know an obvious/hacky solution is to have a jQuery event to listen for a certain scrollTop position and then manually modify these attributes so that the dropdown always has x-placement="bottom-start" and position: absolute; transform: translate3d(0px, 60px, 0px); top: 0px; left: 0px; will-change: transform;, but I was wondering if there’s a more ‘correct’ way of solving this, for example interacting with the Bootstrap Dropdown Javascript class, or even PopperJS?

I printed the contents of window to the console, and couldn’t find anything Bootstrap-related to interact with.

Any pointers on this would be great!

Cheers,
Lloyd

Why not use position: fixed or, better, Bootstrap’s fixed position classes to stick the navbar to the top? That way you don’t have to worry about translating.

You can use scrollpos-styler to change the height of the navbar while keeping it position: fixed;.

Thanks for your reply!

The main banner already has position: fixed;, and the nav-main sits inside of it, and the dropdown submenu sits inside of that, so I’m not sure that’s possible on this occasion.

I think my question was more just asking “Is there a way to interact with Bootstrap JS stuff from the Sage theme?”.

Well, I think your submenu is moving out of view because its parent is moving out of view, too.

Do you have this site online somewhere we could poke at the CSS?

The parent menu isn’t moving out of view – It’s always glued to the top of the screen. The GIF is a bit misleading in that respect, as it implies that the parent nav menu goes away, but it doesn’t (rather, just the submenu goes up and over it).

I don’t have a site available to view, unfortunately.

I forgot to say:

Manually modifying the sub-menu’s inline styles with:
x-placement="bottom-start" and position: absolute; transform: translate3d(0px, 60px, 0px); top: 0px; left: 0px; will-change: transform; does solve it.

I’m just interested to know if there’s a way to interact with PopperJs or Bootstrap’s JS in Sage, rather than hacking stuff.

It turns out the ‘hacky’ solution doesn’t work:

const dropdownMenu = () => {
  const $window = $(window);

  $window.on("scroll", () => {
    if (
      $(".dropdown-menu").length &&
      $(".banner").length &&
      $(".dropdown-menu").hasClass("show")
    ) {
      let dropdownMenu = $(".dropdown-menu.show");
      const bannerHeight = $(".banner").height();

      $(dropdownMenu)[0].style.setProperty(
        "cssText",
        `transform: translate3d(0px, ${bannerHeight}px, 0px)!important`
      );
    }
  });
};

export default dropdownMenu;

I think my updating of the transform property is getting over-written by the PopperJS / Bootstrap code that modifies it.

Problem solved at GitHub