Display search form and navbar menu item in one row

Vote count:

0

I want to display search form and navbar menu items in one row whereas right now it is showing in two rows.

HTML:

<title>This is test</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="animate.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="http://ift.tt/1fK4qT1"></script>
    <script src="http://ift.tt/1knl5gY"></script>
  <![endif]-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="http://ift.tt/13qgtmt"></script>
<script src="js/bootstrap-carousel.js"></script> 
<script src="js/modern-business.js"></script> 
<!-- Navigation -->
<header id="header">
    <div class="top-bar">
        <div class="container">
            <div class="row">

                 <div class="col-md-4 col-md-offset-3">
        <form action="" class="search-form">
            <div class="form-group has-feedback">
                <label for="search" class="sr-only">Search</label>
                <input type="text" class="form-control" name="search" id="search" placeholder="search">
                <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
        </form>
    </div>

                <div class="col-sm-6 col-xs-8">

                <ul class="nav navbar-nav navbar-right">
                   <li><a href="#">My Account</a></li>
                   <li><a href="#">Sign In</a></li>
                   <li><a href="#">Create Account</a></li>
                   <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</a></li>
               </ul>

                   </div>
                </div>

        </div><!--/.container-->
    </div><!--/.top-bar-->

CSS:

 #header .search{
 display: inline-block;
 }

 .navbar>.container .navbar-brand{
   margin-left: 0;
   }

  .top-bar {
   padding: 10px 0;
   background: #191919;
   border-bottom: 1px solid #222;
   line-height: 28px;
   }

 .search i {
  color: #fff;
  }

 input.search-form{
 background: transparent;
  border: 0 none;
 width: 60px;
  padding: 0 10px;
 color: #FFF;
 -webkit-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-o-transition: all 400ms;
 transition: all 400ms;
}


 .search-form .form-group {
  float: right !important;
  transition: all 0.35s, border-radius 0s;
  width: 32px;
  height: 32px;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 25px;
   border: 1px solid #ccc;
   }
  .search-form .form-group input.form-control {
   padding-right: 20px;
   border: 0 none;
   background: transparent;
   box-shadow: none;
   display:block;
   }
  .search-form .form-group input.form-control::-webkit-input-placeholder {
   display: none;
   }
  .search-form .form-group input.form-control:-moz-placeholder {
   /* Firefox 18- */
   display: none;
   }
  .search-form .form-group input.form-control::-moz-placeholder {
 /* Firefox 19+ */
  display: none;
  }
  .search-form .form-group input.form-control:-ms-input-placeholder {
   display: none;
    }
    .search-form .form-group:hover,
   .search-form .form-group.hover {
    width: 100%;
     border-radius: 4px 25px 25px 4px;
     }
    .search-form .form-group span.form-control-feedback {
    position: absolute;
    top: -1px;
     right: -2px;
     z-index: 2;
    display: block;
    width: 34px;
     height: 34px;
    line-height: 34px;
     text-align: center;
     color: #3596e0;
    left: initial;
     font-size: 14px;

How can i show both navbar menu items and animated search form in one row instead of two rows.

Thanks for help.

asked 46 secs ago

user1120133

1,253

Display search form and navbar menu item in one row