While testing the website on a browser using webmaster tools to simulate an iPhone, all appears well. The mobile menu is visible and overlays properly. However, upon actually accessing the site on my iPhone, the top part of the flyout menu is hidden behind a div element added to the HTML by a WordPress function. This specific div is normally hidden on desktop with CSS.
How can I ensure that the menu is always displayed on top?
Below is a simplified snippet of the generated HTML code. The asterisks denote important sections:
<body>
**<div id="custom-header-code" class="topheader">content</div>**
<div id="gen-wrap" class="wrapper"gt;
<header> <!-- for mobile -->
<div class="wpb_wrapper">
<div id="header-logo">content</div>
<div id="mobile-container-toggle">content</div>
**<div id="mobile-container">flyout menu content</div>**
<div id="mobile-container-overlay"></div>
</header> <!-- for mobile -->
<header> <!-- for desktop -->
<!-- content -->
</header> <!-- for desktop -->
</div>
I have attempted adjusting the z-index values of different elements without success.