在wordpress上隐藏菜单

Question

我需要在主页上隐藏我的菜单，让它在向下滚动时出现。我正在使用Wordpress和Elementor。我能够通过安装“自定义CSS&JS”插件来实现这一点，它允许我添加任何我需要的JS代码。

我使用elementor自定义CSS在菜单部分添加了以下代码：

null

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

null

然后我用我安装的插件将这个Java脚本添加到我的网站上，

null

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

null

这做了工作，但现在菜单是隐藏在所有网页上的网站和它出现时，我向下滚动。我希望它只在主页上这样做。我尝试添加一个IF命令，但没有起作用。

Answer 1

wordpress站点的主站点的body元素应该有一个home类。您可以使用浏览器的检查器（右键单击，检查）来查看哪些类应用于正文或其中的包装器类。

因此您可以使用以下类来确定css和js中的菜单元素:.home#menu{...}

只有当菜单位于具有特定类的父元素内部时，才会应用css样式（您有显示none）。