[benmeroffParticipant]

In direct reference to the topic that was closed last year (https://community.theme.co/forums/topic/navbar-submenu-on-top/), we’d like to accomplish the same thing, but now with UberMenu.

As we’re now trying to use UberMenu instead, I was wondering if there was a way to automatically align our UberMenu submenu flyouts above the menu when our navbar is at the bottom of the page, and then have the flyouts automatically position under the menu when the page is scrolled down far enough (same as what you got to work in the above thread).

[benmeroffParticipant]

This reply has been marked as private.

[benmeroffParticipant]

After first submitting this same query to UberMenu support, this is their response (hopefully this can help):

Since you’ve received your copy through Themeco, you’d direct any support requests to them 🙂

The key your question will be the “ubermenu-invert” class, which would be applied to the .ubermenu nav element. When this class is present, a horizontal menu’s submenu will extend up instead of down. So toggling this class will allow you to toggle the direction of the submenus. As for when you trigger that, you could use either some custom JS window scroll detection, or a plugin like Waypoints to tell when the menu is at different locations on the screen.

Hope that helps 🙂

[benmeroffParticipant]

So I got a bit antsy and tried out some class changes myself; turns out this does exactly what I was hoping to do!

First, I made sure to include this in my custom CSS:

.x-navbar.pull-up-submenu  .desktop .x-nav > li ul {
    top: -114px;
}

Then, I used this in my custom Javascript:

jQuery ( function($) {
  
$('.ubermenu').addClass('ubermenu-invert');
  
$(window).on('scroll', function() {

if ( $(this).scrollTop() <= ( $('.x-navbar').offset().top - 150 ) ) {
$('.ubermenu').addClass('ubermenu-invert');
} else {
$('.ubermenu').removeClass('ubermenu-invert');
}

} );

} );

Et voila! It works beautifully; when my page loads, it automatically pulls the UberMenu flyout up above my menubar (keeping the flyout in view, my navbar loads at the bottom of the page), then when I scroll up to the top and my navbar docks at the top, it pulls the flyout down below my navbar (in view).

[RupokMember]

Glad that you figured it out. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts