Is it possible to use flexnav without fixed width buttons?
I would like all navigation items to only use the necessary width to display their text and padding. Currently, I have to divide 100% by the number of navigation items we have. This value is set with .flexnav li{}
<div id="wrapper">
<h1>Flexnav - Content Width Test</h1>
<div class="menu-button">Show Menu</div>
<div class="nav-container container">
<div class="nav">
<ul class="flexnav" data-breakpoint="800">
<li><a href="">Startpage</a></li>
<li><a href="#">About Us</a>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product Category 1</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Large Product Category</a></li>
<li><a href="#">Small one</a></li>
<li><a href="#">PPPPProducts</a></li>
</ul>
</li>
<li><a href="#">Media</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<p>The red space is needed for a search and some Icons</p>
</div>
I have created a codepen to showcase the working nav. Any tips on solving this problem would be greatly appreciated: http://codepen.io/anon/pen/aCjGq
Thank you!