Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – hide menu on wordpress

I need to hide my menu on the home page and make it appear when scrolling down. I am using WordPress and Elementor. I was able to achieve this by installing "Custom CSS & JS" plug-ins which let me add any JS code I need.

I added this code on my menu section using elementor custom CSS:

@media (min-width: 1024px){
#menu {
    display:none;   
    width:100%!important;
}
}

and then I added this Java Script, to my website using the plug in that I installed,

jQuery(document).ready(function( $ ) {
    jQuery(window).scroll(function() {
      
      if ( $ (window).width() > 1024) {
       
        if ( $ (window).scrollTop() >= 400) {
            $ ('#menu').fadeIn();
          } else {
            $ ('#menu').fadeOut();
             }
      }
    });
});

which did the job, but now the menu is hidden on all the pages on the website and it appears when I scroll down. I want it to do that just on the home page. I tried to add an IF command, but didn’t work.

Tags:

2

Answers


  1. 0

    The body element of the home site of your wordpress site should have a class of home. You can use the inspector of your browser (right click, inspect) to see which classes are applied to the body or wrapper classes within it.

    So you can target the menu element in your css and js using this class:
    .home #menu { ... }

    The css styles (you have the display none) will only be applied if the menu is inside of the parent element with specific class.

    Login or Signup to reply.
  2. 0

    Have you tried to enclose that within a conditional that tests with window.location.href as such?

     jQuery(document).ready(function( $ ) {
    jQuery(window).scroll(function() {
    if(window.location.href === "https://mangoandlatch.com/") {
          if ( $ (window).width() > 1024) {
           
        if ( $ (window).scrollTop() >= 400) {
            $ ('#menu').fadeIn();
          } else {
            $ ('#menu').fadeOut();
             }
          }
    }
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search