html - Full width horizontal navigation and Foundation framework -
i trying make horizontal navigation using css tables. when use plain html , css works correctly doesn't when foundation css included. left aligned , not full width. doing wrong? thank much.
plain code - http://codepen.io/anon/pen/yngxpo
foundation css included - http://codepen.io/anon/pen/jdejom
html
<div class="row contain-to-grid"> <nav class="top-bar" data-topbar role="navigation"> <section class="top-bar-section"> <ul> <li><a href="#">asdf</a></li> <li><a href="#">asdasdasdasdasd asdasd</a></li> <li><a href="#">qweqweqwe</a></li> <li><a href="#">qwe</a></li> <li><a href="#">qwe</a></li> <li><a href="#">sdpofispdof</a></li> </ul> </section> </nav> </div>
css
.top-bar .top-bar-section { width: 100%; display: table; } .top-bar .top-bar-section ul { display: table-row; width: inherit; } .top-bar .top-bar-section li { display: table-cell; width: auto; text-align: center; border: 1px dotted red; } .top-bar .top-bar-section { display: block; }
.top-bar-section ui li
problem child here. foundation forces float: left;
when min-width: 40.063em
triggered.
if override float: left;
it'll work.
@media screen , (min-width: 40.063em) .top-bar-section ul li { float:left; }
so change .top-bar .top-bar-section li
css include new float value:
.top-bar .top-bar-section li { display: table-cell; width: auto; text-align: center; border: 1px dotted red; float: none; }
this work if custom stylesheet being loaded after foundation overrides media call.
Comments
Post a Comment