菜单显示在桌面浏览器的移动视图中，但不显示在实际的移动设备上

Question

我正在使用wordpress的网站上工作。我正在制作自定义菜单。当您在检查元素中激活mobile view时，它可以正常工作，但是在实际的电话中，菜单似乎是透明的（它打开了，但您没有注意到，请按右上角激活不可见的关闭按钮）。我尝试添加z-index。它的位置固定，但是仍然没有任何作用。

jQuery(document).ready(function( $ ){
  var $ = jQuery;

  $(".mobile_menu_button").click(function(e){
    $(".mobile_menu li").css("margin-top","20px");
    $(".mobile_menu").fadeIn();
    $(".mobile_menu li").animate({marginTop: "0"}, 500);
    e.preventDefault();

    $(".mobile_menu ul").fadeIn();
  });

  $(".mobile_menu i").click(function(e){
    closeMenu();
  });
});

function closeMenu()
{
  var $ = jQuery;
  $(".mobile_menu li").animate({marginTop: "20px"}, 500);
  $(".mobile_menu").fadeOut();
}

这是CSS：

.mobile_menu ul{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 6% !important;
    background: white !important; 
}

这是wordpress html / php代码：

echo '<ul>';
echo '<li class = "close"> <i class = "fa fa-times" onclick = "closeMenu()"></i> </li>';
wp_nav_menu( array( 'theme_location' => 'left-top-navigation' ,
  'container'  => '',
  'container_class' => '',
  'menu_class' => '',
  'menu_id' => '',
  'fallback_cb' => '',
  'link_before' => '<span>',
  'link_after' => '</span>',
  'walker' => new qode_type4_walker_nav_menu(),
  'items_wrap'      => '%3$s'
));
wp_nav_menu( array( 'theme_location' => 'right-top-navigation' ,
  'container'  => '',
  'container_class' => '',
  'menu_class' => '',
  'menu_id' => '',
  'fallback_cb' => '',
  'link_before' => '<span>',
  'link_after' => '</span>',
  'walker' => new qode_type4_walker_nav_menu(),
  'items_wrap'      => '%3$s'
));
echo '</ul>';

如果您要测试，请点击以下链接：https://cloudypro.net/demo/nfbynour/

Answer 1

我使用Safari在iphone X上为您调试了此功能，看起来nav.mobile_menu出现了溢出：隐藏在它上面。因为从技术上讲这没有任何高度，因为ul位置固定，因此不会显示任何内容。删除该溢出：隐藏，并且导航栏立即弹出。