Zurb foundation 5 - topbar search

Question

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.

Answer 1

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/