Main Menu does not show on mobile (portrait) - html

Question

So I am still learning about css / html for Mobile devices. I have a site that when on desktop looks good. When you pull it up on mobile device the menu is gone. If you go into landscaping mode the menu will appear. Any help on why?
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 <img src="images/logo.png" alt="wake up rentals"></li>
<li class="current">Home</li>
<li>Rentals</li>
<li>Lakes</li>
<li>Rent Now</li>
<li>FAQ's</li>
<li>Login</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
Menu Block CSS
.menu_block {
z-index: 999;
position: relative;
background: url(../images/menu_bg.png) 0 0 repeat-x #d8d8db;
padding: 12px 0 11px;
}
.menu_block nav {
position: relative;
font-family: 'Marvel', sans-serif;
}
nav>.sf-menu {
z-index: 990;
text-align: center;
position: relative;
}
nav{ position:relative;padding: 0px 0 0 0;}
.sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */}
.sf-menu>li {
display: block;
position: relative;
display: inline-block;
font-size: 24px;
line-height: 20px;
}
.sf-menu>li>ul>li {
float: none;
position: static;
}
.sf-menu>li+li {
margin-left: 27px;
}
.sf-menu>li>a{
font-weight: bold;
text-align: center;
color: #313030;
display: block;
padding: 9px 25px;
}
.sf-menu>li.sfHover>a, .sf-menu>li.current>a, .sf-menu>li>a:hover {
color: #000;
background-color: blue;}
.sf-menu>li>a.sf-with-ul:after {
position: absolute;
content: '';
left: 50%;
margin-left: -3px;
width: 5px;
background: url(../images/arrows.png) 0 0 no-repeat;
height: 4px;
bottom: 10px;
pointer-events: none;
z-index: 999;
display: block;
}
.sf-menu>li>ul>li>a.sf-with-ul:after {
content: '';
font-family: 'FontAwesome';
position: absolute;
width: 5px;
font-size: 15px;
line-height: 13px;
font-weight: normal;
right: -15px;
color: #fff;
bottom: 3px;
pointer-events: none;
z-index: 999;
}
Mobile Menu Block
#media only screen and (max-width: 767px) {
.menu_block {
float: none !important;
padding: 20px 10px 25px !important;
clear: both;
min-height: 0px;
border: none;
}
.menu_block nav {
border: none !important;
float:none !important;
font:12px/15px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#927c67;
margin: 0 auto;
padding-left: 0 !important;
}
header nav ul {
border: none;
}
.sf-menu {
display:none !important;
float: none;
}
#mm0 {
font:12px/15px Arial, Helvetica, sans-serif;
color:#202020;
width:100%;
margin: 0 auto;
float: none;
outline: none;
border:2px solid #fff;
}
}
I am not sure if you need more like the container_12 and grid_12 code. There was a lot of lines of code in them. And did not want to add a lot of not needed info . If you think they are needed I can post them.
Container_12 / some grid_12 CSS
https://pastebin.com/tup8Psis
Grid_12 CSS
https://pastebin.com/qxAswhVc
posted links to the css figured it was easier to read there...

Answer 1

You have your UL set to "Display None" at max-width 767px.
#media only screen and (max-width: 767px)
.sf-menu {
display: none !important;
/* float: none; */
That is why you do not have a menu, remove the "Display None" from your UL.