Menu icon Foundation
How to change the size of the top-bar right and top-bar left ?

OK here is a screen shot of my site so far. As you can see to the left of the website i have a search bar i would like to expand the search to a larger area of the top make the search bar take up a wider space much wider space but i don't know how to do it I will provide a sample of the code i used thus far. Can someone help please??? Thank you in advance.

<div class="top-bar">

    <div class="top-bar-left">

        <ul class="dropdown menu" data-dropdown-menu>

            <li class="menu-text">LearnLink</li>

            <div class="menu">

                <li><button id="signupButton" type="button" class=" hollow button" data-open="signupform" >SignUp</button  ></li>

                <li><button id="signinButton" type="button" class=" hollow button" data-open="signinform">SignIn</button  ></li>

            </div>

        </ul>

    </div>

    <div class="top-bar-right">

        <ul class="menu">

            <li><input type="search" placeholder="Search for a question or answer here"></li>

            <li><button type="button"class="button">Search</button></li>

        </ul>

    </div>

</div>

website with top-bar

top-barnavigationexpanded

OK here is a screen shot of my site so far. As you can see to the left of the website i have a search bar i would like to expand the search to a larger area of the top make the search bar take up a wider space much wider space but i don't know how to do it I will provide a sample of the code i used thus far. Can someone help please??? Thank you in advance.

<div class="top-bar">

    <div class="top-bar-left">

        <ul class="dropdown menu" data-dropdown-menu>

            <li class="menu-text">LearnLink</li>

            <div class="menu">

                <li><button id="signupButton" type="button" class=" hollow button" data-open="signupform" >SignUp</button  ></li>

                <li><button id="signinButton" type="button" class=" hollow button" data-open="signinform">SignIn</button  ></li>

            </div>

        </ul>

    </div>

    <div class="top-bar-right">

        <ul class="menu">

            <li><input type="search" placeholder="Search for a question or answer here"></li>

            <li><button type="button"class="button">Search</button></li>

        </ul>

    </div>

</div>

website with top-bar