Dropdown Menu Doesn't Work With Sticky Navigation Bar

[j0hnwat3rman]

Hello,

When using a dropdown menu (normal or mega) that’s nested in a sticky navigation bar, the menu is jittery and jumpy when you scroll up or down on the page. If you disable the sticky option in the nav bar, the menu nests perfectly and there are no issues.

https://mybexadev.wpenginepowered.com/

This is surely not the way it’s intended to work, and basically makes using a dropdown menu within a sticky navigation bar unusable. Unfortunately, I can’t figure out a work around. I also can’t imagine I am the only person who has come across this but haven’t been able to find a similar post in the forum.

Would greatly appreciate this getting a look and some suggestions for a fix and.or workaround.

[ruenel]

Hello @j0hnwat3rman,

Thanks for writing in! I was able to replicate the issue on my local testing server. I believe that this is a bug in the latest release. I will be adding this to our issue tracker.

Best Regards.

[j0hnwat3rman]

Thanks very the response and heads-up…

Unfortunately, I have updated Pro to the latest version on many of the sites I support that use a dropdown menu and a sticky navbar, but I did find one that’s still running 6.4.6. On this site I am using the inline element with a dropdown menu and it works as expected. You can see that at https://sprucemountaininn.com (Scroll Down a touch to force the navbar to display).

Because this makes using a dropdown menu with a sticky navbar pretty much unusable right now, at least not for clients who expect something as common as a dropdown menu + sticky navigation to work much than what we have currently, I’m hoping we can see a fix soon or at least come up with a reasonable workaround. I’ve already heard from a couple of folks.

Thanks, again, for the response!

[ruenel]

You are most welcome, @j0hnwat3rman.
We appreciate your kind understanding.

[j0hnwat3rman]

@Charlie - I hope you’re doing great!

I saw that you noted this would likely be addressed in 6.5 in a separate but related thread. Is this still the case? I’m working on a time-sensitive project and our client is set on a mega menu dropdown menu with a fixed navbar.

Much appreciated!

[marc_a]

@j0hnwat3rman,

Upon checking the issue tracker this issue has been fixed in the 6.5 release. We highly suggest that you wait for the upcoming update but we cannot give ETA.

Thank you for understanding.

[j0hnwat3rman]

I appreciate the heads up @marc_a, but this seems like it should be a very high priority. Again, I can’t use a dropdown menu element with a fixed navbar, which is a big deal. Totally get there are a number of things you guys are rolling out and working on but this isn’t an obscure feature or bug. Knowing when the fix is coming out would at least allow me to potentially by some time with a client or help me decide whether or not I need to invest in a usable workaround.

@Charlie - Any chance you can help here or point me to a potential alternative?

[charlie]

If you target the dropdown with CSS you can probably get around this. You might have to play with the values. This is positioned to the right side. If you sign up for One Total Care we can also get a custom build for you. You probably won’t be able to update in that scenario till Pro 6.5 comes out though. Let us know if this helps and have a great day.

/* Goes into custom css of the dropdown element */
$el.x-dropdown {
  position: fixed !important;
  right: 2em !important;
  top: 2em !important;
}

[j0hnwat3rman]

Very much appreciate the follow-up! Fixing the position and then adjusting the top value to account for the header height seems to do the trick.