Zurb foundation top bar search input

1
votes

I'm using zurb foundation 4. I create a top bar with a search form within the same:

  <nav class="top-bar">
    <ul class="title-area">
    <li class="name">
     <h1><a href="#">Title</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">
  <!-- Left Nav Section -->
  <ul class="left">
    <li class="has-form">
      <form>
        <div class="row collapse" >
          <div class="small-10 columns">
            <input type="text">
          </div>
          <div class="small-2 columns">
            <a href="#" class="alert button">S</a>
          </div>
        </div>
      </form>
    </li>
  </ul>

  <!-- Right Nav Section -->
  <ul class="right">
    <li class="divider"></li>
    <li class="has-dropdown"><a href="#">Drop1</a>
      <ul class="dropdown">
        <li><a href="#">Dropdown Level 3a</a></li>
        <li><a href="#">Dropdown Level 3b</a></li>
        <li><a href="#">Dropdown Level 3c</a></li>
      </ul>
    </li>
    <li class="divider"></li>
    <li class="has-dropdown"><a href="#">Drop2</a>
      <ul class="dropdown">
        <li><a href="#">Dropdown Level 3a</a></li>
        <li><a href="#">Dropdown Level 3b</a></li>
        <li><a href="#">Dropdown Level 3c</a></li>
      </ul>
    </li>
  </ul>
</section>

I need to increase the size in the search field without losing responsiveness. Does anyone have any idea how can I do?

http://cl.ly/image/1a412p3M3e1J

2
cssresponsive-designzurb-foundation
Can you create on jsfiddle? – rails_id

2 Answers

3
votes

If you're using SASS, simply change:

input { height: $topbar-input-height }

To:

input { height: $topbar-height }

If you're using CSS, change the line with:

.top-bar input { height: 2.45em; }

To:

.top-bar input { height: 45px; }

Follow a similar process if you wish to change the width.

0
votes

I am a big fan of CDN, so editing the Foundation files is not an option.

Here is the workaround that works for me:

.top-bar input {
  height: auto !important;
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}