Bootstrap and search input width change on focus

Question

I am using bootstrap 3 to create my nav bar. I also needed to place a search bar on the navbar. So my code looks like this

<div class="navbar navbar-default">     
    <a class="navbar-brand">Logo Image</a>
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Calendar</a></li>
    <li><a href="#">Customerr</a></li>
    <li><a href="#">Providers</a></li>                  
    </ul>
    <form class="navbar-form navbar-right" action="">
    <div class="form-group">
        <input type="text" class="form-control mac-style" name="Search" id='nav-search' placeholder="Search">
    </div>
    <input type="submit" name="search" value="Search" class="btn btn-default" > 
    </form>
</div>

I want the input box to get bigger when the usere focuses to search but to the left like stack's search bar. I tried the following css at first

.mac-style:focus{
    width: 500px;
}

and the input box grows to the left but the transition is very rough. So i tried to add the transition property(webkit moz o an default) like this

 .mac-style:focus{
    width: 500px;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition:width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

but the input changes width to the right going behind the search button and off the nav-bar. Ho can i make it act like the css without the transition(grow to the left). The way my nav bar is created, is there a way to make it stop when it reaches the last li so it is more dynamic?

Answer 1

If i correctly understand you - take a this fiddle . I don't know yours other css styles, but you can a create your fiddle and show it to us.