Recently, I've been immersed in a web development project for a company. For the navigation bar, I opted to use the FlexNav JQuery plugin. While referencing the example on , I encountered an issue when attempting to add more than 5 list elements; they kept jumping to the next line inexplicably. Is this a result of faulty HTML or CSS? It doesn't seem like a table-related problem, as it appears that either the JavaScript or CSS automatically forces a line break after 5 elements, regardless of the HTML structure.
I suspect the root of the issue lies within these code snippets:
.flexnav {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
transition: none;
-webkit-transform-style: preserve-3d;
overflow: hidden;
margin: 10 auto;
width: 70%;
max-height: 0;
}
.flexnav.opacity {
opacity: 0;
}
.flexnav.flexnav-show {
max-height: 2000px;
opacity: 1;
-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 {
position: relative;
top: 50px;
right: 5%;
max-width: 200px;
}
.flexnav li {
font-size: 100%;
position: relative;
}
If interested, here is a link to my source code: http://codepen.io/xjokes_henry/pen/grOwBe