Menu icon Foundation
How to change topbar search box size

How do I increase the size of the Search Input in the Top Bar for large screens? If I use the following code below, it gives a pretty small search input. I need the search input to be around 800px. The large-8 right now only gives me about 125px. How can I change it to be 400 to 800px?

<li class="has-form"> 
    <div class="row collapse"> 
        <div class="large-8 small-9 columns"> 
            <input type="text" placeholder="Find Stuff">     
        </div> 
        <div class="large-4 small-3 columns"> 
            <a href="#" class="alert button expand">Search</a>
        </div> 
    </div> 
</li>
            

         

topbarsearchinputSize

How do I increase the size of the Search Input in the Top Bar for large screens? If I use the following code below, it gives a pretty small search input. I need the search input to be around 800px. The large-8 right now only gives me about 125px. How can I change it to be 400 to 800px?

<li class="has-form"> 
    <div class="row collapse"> 
        <div class="large-8 small-9 columns"> 
            <input type="text" placeholder="Find Stuff">     
        </div> 
        <div class="large-4 small-3 columns"> 
            <a href="#" class="alert button expand">Search</a>
        </div> 
    </div> 
</li>
            

         
Caleb Winters almost 6 years ago

Text inputs expand to fill the width of their parent. Try varying the column width. Example:

<div class="large-9 small-10 columns">
  <input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-2 columns">
  <a href="#" class="alert button expand">Search</a>
</div>

Jon Stevens over 4 years ago

I have the same issue, but I don't think changing the number of columns as shown is the answer. It doesn't increase the overall size but just swaps the proportions between the text input and the search button. So the above answer slightly enlarges the text area at the cost of a smaller button.

I've tried pinpointing the element that will increase the total size of the input and button combined, but I can't figure it out either.

Any help appreciated.

Rafi Benkual over 4 years ago

In the case above, the <li class="has-form"> is containing the form element. You can use CSS to make it wider.

Example: http://codepen.io/rafibomb/pen/vEozYg

You'll need to change the breakpoint if you do it this way.