Hide menu until scroll

Support
#1

Howdy, see this site:

I have this css:

.home .x-navbar {
visibility: hidden;
top: -200px;
transition: all 300ms linear;
}

.home .x-navbar.x-navbar-visible {
visibility: visible;
top: 0;
transition: all 300ms linear;
}

.home .x-navbar .x-container.max.width {
width: 95%;
max-width: 100%;
}

And this Java:

jQuery(function($) {

var $body = $(‘body’);
var $navbar = $(’.x-navbar’);

if ( $body.hasClass(‘home’) && $body.hasClass(‘x-navbar-fixed-top-active’) && $navbar.length > 0 ) {

var boxedClasses = ‘’;

if ( $body.hasClass(‘x-boxed-layout-active’) ) {
boxedClasses = ’ x-container max width’;
}

$(window).scroll(function() {
console.log(navbarOffset());

if ( $(this).scrollTop() >= navbarOffset() ) {
$navbar.addClass(‘x-navbar-visible’ + boxedClasses);
} else {
$navbar.removeClass(‘x-navbar-visible’ + boxedClasses);
}

});
}

function navbarOffset() {
return $(’.x-slider-container.below’).outerHeight() / 2;
}

});// JavaScript Document

It works how I want it to on the desktop and laptop, but the mobile menu isnt working, can you help me out please.

Thanks.

#2

Hey there,

Thank you for reaching out to us. To fix the issue, please add the following code in the Theme Options > CSS:

@media (max-width: 979px) {
    .home .x-navbar {
        visibility: visible !important;
        top: 0 !important;
    }
}

Please note that we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

#3

Thanks, but not what I wanted, sorry, I still want the menu to be invisible until the user scrolls on the mobile.

#4

Hi @logoglo,

Please consider that the original theme does not have the fixed menu at all due to the limitations of the mobile devices and the small window sizes. That is why your code will not work on the mobile at all as the whole menu is not sticky to show or not show in the first place.

Unfortunately, this will need a whole set of development work to make the mobile menu sticky, then on top of that the feature that you want to implement. This is way beyond our support scope and you will need to hire a developer to implement the feature.

Thank you for your understanding.

#5

No worries. Any way of making the slider appear without the added -105px margin, only on the mobile view?

#6

Hi there,

Please try this:

@media (max-width: 480px) {
    .home .x-slider-container .rev_slider_wrapper {
        margin-top: 0 !important;
    }
}

Hope this helps.

#7

Perfect! thanks.

#8

You’re welcome.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.