css - Why is Foundation topbar not responsive? -
css - Why is Foundation topbar not responsive? -
they aren't on actual zurb site actually, not fully.
if go here: http://foundation.zurb.com/docs/components/topbar.html ans scroll built-in components you'll see problem. it's not responsive component on computer screen @ all. fine on mobile (on nexus 4 anyway) , on nexus 7 in portrait mode, in landscape on nexus 7 it's wrong.
this code. need 3 dropdown lists 3 sections of content , hoping have them side side. i'd have in 1 list (unlike bootstrap) there not list dividers dropdowns in foundation.
<nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">my site</a></h1> </li> <!-- remove class "menu-icon" rid of menu icon. take out "menu" have icon lone --> <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li> </ul> <section class="top-bar-section"> <!-- right nav section --> <ul class="right"> <li class="active"><a href="#">right button active</a></li> <li class="has-dropdown"> <a href="#">right button dropdown 1</a> <ul class="dropdown"> <li><a href="#">first link in dropdown</a></li> </ul> </li> <li><a href="#">right button active</a></li> <li class="has-dropdown"> <a href="#">right button dropdown 2</a> <ul class="dropdown"> <li><a href="#">first link in dropdown</a></li> </ul> </li> <li><a href="#">right button active</a></li> <li class="has-dropdown"> <a href="#">right button dropdown 3</a> <ul class="dropdown"> <li><a href="#">first link in dropdown</a></li> </ul> </li> </ul> <!-- left nav section --> <ul class="left"> <li><a href="#">left nav button</a></li> </ul> </section> </nav>
with visibility classes can create separate nav
each size. it's "official" way(look @ docs page source)
css responsive-design zurb-foundation
Comments
Post a Comment