Input With Postfix Button In Top-bar Using Zurb Foundation

I am trying to get a Text-Input with a Postfix Button in my Top-Bar using Zurb-Foundation as explained here: http://foundation.zurb.com/docs/navigation.php#btopCode However, using

Solution 1:

I had the same issue, if you take a look at the documentation, you'll see how to implement it properly.

It's at the bottom of the example snippet:

<liclass="has-form"><form><divclass="row collapse"><divclass="small-8 columns"><inputtype="text"></div><divclass="small-4 columns"><ahref="#"class="alert button">Search</a></div></div></form></li><liclass="divider show-for-small"></li><liclass="has-form"><aclass="button"href="#">Button!</a></li></ul>

Solution 2:

For Foundation 5, this is how I solved the problem:

nav.top-bar {
    $height: 1.8rem;
    $textFontSize: 0.8rem;

    .prefix, .postfix {
        /* So even though you can embed forms in the top nav, they get jankified.
           WOW.  This is kinda lame. */height: $height;
        line-height: $height;
        font-size: $textFontSize;

        i { 
            font-size: 0.8rem;
        }
    }

    .prefix {
        margin-top: 7px; 
    }

    .postfix {
        padding: 0;
    }

    input {
        font-size: $textFontSize;
        height: $height;
    }

Solution 3:

Try placing the form inside of a drop down. I don't think it will work directly on the nav bar it self. This is not documented well on the site and could use some improvement.

 <nav class="top-bar">
        <ul><liclass="name"><h1>Home</h1></li><liclass="toggle-topbar"><ahref="#"></a></li></ul><section><ulclass="left"><liclass="has-dropdown"><ahref="#">Search</a><ulclass="dropdown"><liclass="search"><form><inputtype="search"><buttontype="submit"class="secondary radius button">Search</button></form></li></ul></li><liclass="has-dropdown"><ahref="#">Item1</a><ulclass="dropdown"><li><ahref="#">Sub1</a></li><li><ahref="#">Sub2</a></li><li><ahref="#">Sub3</a></li></ul></li></ul></section></nav>

Solution 4:

I had the same issue as you Search input in top-bar foundation cut off and managed to make it work after a while by float everything to the left and adding some !important and the inputs. What I found in foundation docs wasn't helpful but anyways, this did the trick:

.left.search.button { float:left; width:50px; margin-left:5px;}
.searchinput {width:200px;float:left;top:5px;}
.searchform {float:left !important; width:450px!important;}