Docs

[pacman]

I have my main menu at the bottom of a full-page slider similar to the x theme main site.

However, this results on my sub-menus not being visible when hovering the menu items containing sub-menus. Also, on mobile devices after tapping the menu icon the menu won’t be visible unless the user has scrolled down first.

Is it possible to have the page automatically scroll down (same effect as “scroll bottom anchor”) if the mouse pointer hovers over the menu or if a user taps on the menu icon on a mobile device?

Thanks!

[pacman]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    z-index: 99999;
    position: relative;
}
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li ul {
    top: 50px !important;
}

.x-navbar .desktop .x-nav > li ul {
    top: -222px !important;
  
}

@media (max-width:979px){
.x-navbar {
    position: absolute;
    bottom: 0;
    width: 100%;
}
}

Hope that helps.

[pacman]

Thanks. Works great on the home page but on other pages the menu still goes upwards and gets cut out. The same happens on mobile devices.

[Christopher]

Hi there,

Ok, I see. Please remove the code from customizer and put it in home page/cornerstone settings tab/custom css to apply it to home page only.

Hope it helps.

[pacman]

Works great. Thanks!

[Joao]

Glad to hear it

Cheers

[pacman]

Hey,

I realized there is still a bit of an odd behavior on mobile devices. The menu will correctly pop upwards before scrolling down but if you scroll down while the menu is visible it will flip downwards but with a transparent background instead of white.

Also, if you scroll down just until the header bar with logo and menu button are not visible, the header bar will flip downwards with transparent background and if you hit the menu button, the background will be transparent as well.

This is in an android device in case that makes a difference.

Thanks!

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar-inner {
    background-color: #fff; 
}

Hope that helps.

[pacman]

thanks!

[Paul R]

You’re welcome! 🙂

[Author]

Posts