Dropdown submenu disappearing on scroll

bootstrap4

#1

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


#2

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;.


#3

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?”.


#4

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?


#5

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.


#6

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.


#7

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.


#8

Problem solved at GitHub