Currently delving into the world of CSS/HTML for mobile devices, I've encountered an issue with my site. It looks great on desktop, but on a mobile device, the menu disappears. However, when switched to landscape mode, the menu magically reappears. Any insights on why this might be happening?
Here's a snippet of the menu code:
<div class="menu_block ">
<div class="container_12">
<div class="grid_12">
<nav class="horizontal-nav full-width horizontalNav-notprocessed">
<ul class="sf-menu">
<li <a href="index.php"><img src="images/logo.png" alt="wake up rentals"></a></li>
<li class="current"><a href="index.php">Home</a></li>
<li><a href="rental.php">Rentals</a></li>
<li><a href="lakes.php">Lakes</a></li>
<li><a href="Register.php">Rent Now</a></li>
<li><a href="FAQ.php">FAQ's</a></li>
<li><a href="Login.php">Login</a></li>
<li><a href="Contact.php">Contact Us</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
Here is the CSS for the Menu Block:
.menu_block {
z-index: 999;
position: relative;
background: url(../images/menu_bg.png) 0 0 repeat-x #d8d8db;
padding: 12px 0 11px;
}
... (CSS rules continue)
To view the complete Container_12 and Grid_12 CSS code, check out the following links:
Container_12 / some grid_12 CSS https://pastebin.com/tup8Psis
Grid_12 CSS https://pastebin.com/qxAswhVc
I have provided the links to the CSS files for easier readability. If you believe more information is necessary, feel free to let me know.