Zurb foundation 5 - topbar search

navigationbar, zurb-foundation

Solution

For starters, Foundation's styling for the `.top-bar input` is being overridden by the styling for the more specific `input[type="text"]`. However, even if you added the `type` attribute, the styling in the 5.0.2 release is slightly different from that of the example.

To mimic the example's styling, add the following to your own custom stylesheet, which should be added after foundation.css:

.top-bar input[type="text"], .top-bar .button {
    font-size: 0.77778rem;
    position: relative;
    top: 7px;
}

.top-bar input[type="text"] {
    height: auto;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.75rem;
}

Edit: Added JSFiddle: http://jsfiddle.net/4vRNt/2/

Problem

have you occured that problem with zurb foundation's topbar? The input box doesnt fit the navigation. I didnt modify anything, just pasting the code from foundation's page to their example website included into foundation files. Changing the font to Open Sans doesnt help too.

Original source