flexnav
flexnav copied to clipboard
Unable to see the whole sub-menu on responsive
Hi!
I am currently using your menu with Foundation 5. See the project here: http://www.nomo.no/test/ I have this issue: everytime I see the website on a mobile device, I cannot see all the options on the sub-menu. How can I fix this? I have no clue about the origin of the problem...
<div class="navigation">
<div class="menu-button one-page"></div>
<nav class="top-menu">
<!-- start menu -->
<ul data-breakpoint="800" class="flexnav one-page">
<li><a href="#start">start</a></li>
<li><a href="#mer">läs mer</a></li>
<li><a href="#dokumentation">dokumentation</a></li>
<li><a href="#kalkylator">nomo kalkylator</a></li>
<li><a href="#faq">faq</a></li>
<li><a href="#nyheter">nyheter</a></li>
<li><a href="#kontakt">kontakt</a></li>
<li><a href="#">sverige</a>
<ul>
<li><a href="#">finland</a></li>
<li><a href="#">norge</a></li>
<li><a href="#">schweiz</a></li>
<li><a href="#">tyskland</a></li>
<li><a href="#">österrike</a></li>
</ul>
</li>
</ul>
<!-- end menu -->
</nav>
</div>
And the CSS
.flexnav {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
-webkit-transform-style: preserve-3d;
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0; }
.flexnav.opacity {
opacity: 0; }
.flexnav.flexnav-show {
max-height: 2000px;
position:absolute;
right:0;
z-index:99999;
opacity: 1;
top:-50px;
width:200px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out; }
.flexnav.one-page {
float:right;
top: 50px;
/*right: 5%;*/
background:#fff;
max-width: 200px; }
.flexnav li {
font-size: 100%;
position: relative;
overflow: hidden; }
.flexnav li a {
position: relative;
display: block;
padding: .96em;
z-index: 2;
overflow: hidden;
font-weight:700;
color: #0072bc;
font-size:14px;
text-transform:uppercase;
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.80); }
@media only screen and (max-width: 1235px) {
nav.top-menu {
margin-top: -10px;
}
.flexnav li a {
position: relative;
display: block;
padding: .96em;
z-index: 2;
overflow: hidden;
font-weight:700;
color: #0072bc;
font-size:12px;
text-transform:uppercase;
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.80); }
}
.flexnav li a:hover, .flexnav li.current a{}
.flexnav li ul {
width: 100%;
}
.flexnav li ul li {
font-size: 100%;
width:120%;
position: relative;
overflow: hidden; }
.flexnav li ul.flexnav-show li {
overflow: visible; }
.flexnav li ul li a {
display: block;
background: #fff;
width:130%;
}
.flexnav ul li ul li a {
background: #bfbfbc; }
.flexnav ul li ul li ul li a {
background: #cbcbc9; }
.flexnav .touch-button {
position: absolute;
z-index: 999;
top: 0;
right: 0;
display: inline-block;
text-align: center; }
.flexnav .touch-button:hover {
cursor: pointer; }
.flexnav .touch-button .navicon {
position: relative;
top: 0.255em;
right:-10px;
/*font-size: 12px;*/
color: #0072bc; }
.menu-button {
position: relative;
display: block;
padding: 1em;
background: transparent;
color: #222222;
cursor: pointer;
}
.menu-button.one-page {
position: relative;
top: -10px;
right: 5%;
float:right;
width:50px;
}
.menu-button .touch-button {
background: transparent;
position: absolute;
z-index: 999;
top: 0;
right: 0;
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
content:"\f0c9";
font-family: 'FontAwesome';
}
.menu-button .touch-button .navicon {
/*font-size: 16px;*/
position: relative;
/*top: 1em;*/
}
@media all and (min-width: 800px) {
body.one-page {
padding-top: 70px; }
.flexnav {
overflow: visible; }
.flexnav.opacity {
opacity: 1; }
.flexnav.one-page {
top: 0;
max-width: 100%;
width:auto;}
.flexnav li {
position: relative;
list-style: none;
float: left;
display: block;
background-color: transparent;
overflow: visible;
width: auto; }
.flexnav li a {
border-bottom: none; }
.flexnav li > ul {
position: absolute;
top: auto;
left: 0; }
.flexnav li > ul li {
width: 100%; }
.flexnav li ul li > ul {
margin-left: 100%;
top: 0; }
.flexnav li ul li a {
border-bottom: none; }
.flexnav li ul.open {
display: block;
opacity: 1;
visibility: visible;
z-index: 1; }
.flexnav li ul.open li {
overflow: visible;
max-height: 100px; }
.flexnav li ul.open ul.open {
margin-left: 100%;
top: 0; }
.menu-button {
display: none; } }
.oldie body.one-page {
padding-top: 70px; }
.oldie .flexnav {
overflow: visible; }
.oldie .flexnav.one-page {
top: 0;
right: auto;
max-width: 1080px; }
.oldie .flexnav li {
position: relative;
list-style: none;
float: left;
display: block;
background-color: transparent;
width: 20%;
min-height: 50px;
overflow: visible; }
.oldie .flexnav li:hover > ul {
display: block;
width: 100%;
overflow: visible; }
.oldie .flexnav li:hover > ul li {
width: 100%;
float: none; }
.oldie .flexnav li a {
border-left: 1px solid #acaca1;
border-bottom: none;
overflow: visible; }
.oldie .flexnav li > ul {
background: #acaca1;
position: absolute;
top: auto;
left: 0;
display: none;
z-index: 1;
overflow: visible; }
.oldie .flexnav li ul li ul {
top: 0; }
.oldie .flexnav li ul li a {
border-bottom: none; }
.oldie .flexnav li ul.open {
display: block;
width: 100%;
overflow: visible; }
.oldie .flexnav li ul.open li {
width: 100%; }
.oldie .flexnav li ul.open ul.open {
margin-left: 100%;
top: 0;
display: block;
width: 100%;
overflow: visible; }
.oldie .flexnav ul li:hover ul {
margin-left: 100%;
top: 0; }
.oldie .menu-button {
display: none; }
.oldie.ie7 .flexnav li {
width: 19.9%; }
I don't know if people are ignoring my issue or if this project is abandoned but seriously this is a serious issue. I have been googling and googling, searching all over this forum and no answers...
No one has any clue?
@jonybigude Might have to change the max-height to something larger.
Thank you @indyplanets!
I have changed max height to 300px on
.flexnav li ul.open li {
overflow: visible;
max-height: 100px;
}
and still did not work. I went ahead and added the following:
@media only screen and (max-width: 40.063em) {
.flexnav li ul.open li {
overflow: visible;
max-height: 200px;
}
}
But it still did not work. It does however work if I scroll down with the finger with just one sweep but unfortunately it only works after a half second or less. After that time the menu returns to it's original position. Wonder if this is a JS problem?
Any other clues?
Change:
.flexnav.flexnav-show {
max-height: 2000px;
...
to
.flexnav.flexnav-show {
max-height: 3000px;
...
Unfortunately that doesn't work neither due to I use sticky header. Any other clues? Perhaps I can do this by moving the sub menu to the left only on mobile devices. I have tried to do this but did not manage without breaking the whole menu... Any other clues?