Menu appearing on mobile view in desktop browsers

Question

I'm working on a site using wordpress. I'm making a custom menu. When you activate mobile view in inspect element it works fine, but from an actual phone the menu seems to be transparent (it opens but you don't notice, press top right to activate the invisible close button). I've tried adding the z-index. It is position fixed, but still nothing is working.

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();
}

And Here is the 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; 
}

And Here is a the wordpress html/php code :

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>';

Here is the link if you wish to test: https://cloudypro.net/demo/nfbynour/

Answer 1

I debugged this for you on iphone X, using Safari and it looks like nav.mobile_menu has an overflow: hidden on it. Because this technically doesn't have any height because the ul is position fixed its not showing you anything. Remove that overflow: hidden and your nav pops right up.