Responsive Nav Menu Using Flexbox - html

Question

I was attempting to build a responsive nav using flexbox. When the screen is smaller than 744px, I wanted a toggle button to appear, the main nav to have a max-height of 0, and then on click, have the nav display in block. Fairly typical stuff.
However, I'm used to doing this just with floats and I'm running into several problems:
I don't understand how to drop the UL below the nav without pushing the nav logo and toggle up;
The UL with the LI doesn't seem to be responding to the max-height trick.
If anyone can provide some assistance or point me in the direction of tutorial that would be great.
* {
margin: 0;
padding: 0;
}
body {
font-family: 'open-sans', 'sans-serif';
font-size: 17px;
color: #444;
}
.navText {
font-size: 14px;
}
nav {
height: 100%;
width: 100%;
background-color: white;
}
.nav-fixedWidth {
//border: 1px solid;
min-height: 120px;
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.mainNav {
list-style: none;
display: flex;
}
.mainNav li {
margin-right: 60px;
padding: 10px;
//border: 1px solid;
}
.mainNav li:nth-child(5){
margin-right: 10px;
}
.mainNav li a {
text-decoration: none;
color: #444;
display: block;
}
.mainNav li a:hover {
color: #9d9d9d;
}
.logo {
height: 60px;
width: 60px;
background-color: #ccc;
}
.toggle {
height: 60px;
width: 60px;
background-color: #ccc;
display: none;
}
#media screen and (max-width: 960px) {
.nav-fixedWidth
{
width: 95vw;
}
}
#media screen and (max-width: 744px) {
.nav-fixedWidth
{
flex-wrap:wrap;
}
.toggle
{
display: block;
}
}
<nav>
<div class="nav-fixedWidth">
<div class="logo"></div>
<div class="toggle"></div>
<ul class="mainNav">
<li class="navText">Webinars</li>
<li class="navText">e-Books</li>
<li class="navText">Blog</li>
<li class="navText">e-Course</li>
<li class="navText">Search</li>
</ul>
</div>
</nav>

Answer 1

I know this might be a bit late for your particular need, but you might want to take a look at this solution by Chris Coiyer
https://codepen.io/chriscoyier/pen/GJRXYE
html {
background: #666;
}
body {
width: 60%;
margin: 0 auto;
background: white;
}
.nav {
position: relative;
ul {
display: flex;
height: 3rem;
overflow: hidden;
flex-wrap: wrap;
list-style: none;
padding: 0;
width: 80%;
}
li {
a {
display: block;
padding: 1rem 0.5rem;
text-decoration: none;
white-space: nowrap;
}
}
&.open {
ul {
height: auto;
display: block;
}
}
}
.x {
position: absolute;
top: 0.75rem;
right: 0.75rem;
cursor: pointer;
}
This solution does require a small amount of JavaScript to toggle the menu.
Hope it helps :-)