Full width search top bar for small in Zurb Foundation

0
votes

I am doing top bar similar to this:

http://foundation.zurb.com/page-templates4/workspace.html

Only requirement is on smaller device, I like to hide everything and only show search bar in full width. I got the "hiding" worked by using .hide-for-small for .title-area a and others but I cannot figure out the proper way to make that search bar goes full width in small size. I DO NOT want to hack.

I tried to put .row and .small-12 .large-12 .columns under .top-bar-section but that just screwed it up more. I believe row/column isn't supposed to be used in top-bar?

Here is the desired outcome:

enter image description here

What are my options? Do I customize my own top-bar? Or is there some class to force full width of top-bar-section?

1
htmlcssresponsive-designstylesheetzurb-foundation

1 Answers

1
votes

Have you tried to wrap your top-bar in a div class contain-to-grid?

A Full-Width Centered Navigation Top Bar - Zurb Foundation