Looking for some help with creating a fixed responsive navigation menu? I've managed to make the top level menu responsive and fixed at the top, but as soon as I try to add dropdown sub-menus, it all falls apart. The issue arises when the sub-menus are clipped or cause the container to expand when I apply positioning to the ul list elements. Is there a way to prevent the sub-menus from being clipped and allow them to extend beyond their containers?
Important Note: The code provided below does not include the display:none and hover display:block properties related to the sub-menus.
I've searched various resources for a solution, including here and other websites, but have yet to find one that works in my specific case. I've experimented with adjusting the positioning properties and removing overflow:hidden, but nothing has proven successful so far.
View the Code on CodePen (http://codepen.io/noob2016/pen/eZqdMM):
.fixedheader {
background: #f2f2f2;
width: 100%;
position: fixed;
top: 0;
z-index: 300;
transition: box-shadow 0.2s;
}
.top-bar-scrolled {
border-bottom: 3px solid #d5d5d5;
box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.4);
}
header {
background: #003383;
border: 6px solid orange;
}
header .mainNav {
background: #003383;
border: 4px solid green;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
/* Remaining CSS styling and HTML markup code here */
</code></pre>
</pre>
<pre><code><div class="fixedheader top-bar">
<header>
<nav class="mainNav">
/* More HTML Markup and nested ul/li elements here */
</ul>
</nav>
</header>
</div>