Создание настраиваемой навигационной панели с кнопкой поиска

Question

Я пытаюсь сделать отзывчивую навигационную панель с помощью бутстрапа. Я хочу построить как http://wordpress.org/support/topic/want-to-move-search-option-from-header-to-navigation-bar. .

Но кнопка поиска не идет вправо, а при свертывании вкладки разделяются и перемещаются к строке ниже. В месте загрузки кнопки Wordpress мне нужны кнопки LogIn и SignUp. При свертывании названия бренда, кнопка поиска и полосы для открытия меню должны отображаться в одной строке.

Может кто-нибудь рассказать, как это сделать? See my code

  <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <a class="navbar-brand" href="#">Brand Name</a> 

       <form class="navbar-form navbar-right" style="float: right;" role="search"> 
        <input type="text" class="form-control" placeholder="Search"> 
       </form> 
      </div> 

      <div style="clear:both"></div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Highlights</a></li> 
        <li><a href="#">Test Yourself</a></li> 
        <li><a href="#">Interesting Questions</a></li> 
        <li><a href="#">Ask Queries</a></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">SignUp</a></li> 
        <li><a href="#">LogIn</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

.navbar { 
    min-height: 120px; 
} 

.navbar .container { 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

.navbar-nav>li>a { 
    text-transform: uppercase; 
    font-family: "jokerman"; 
    font-size: 16px; 
} 

@media (min-width: 768px) { 
    .navbar-nav { 
     margin: 0 auto; 
     display: table; 
     table-layout: fixed; 
     float: none; 
    } 
} 

Answer 1

Я не очень понимаю, если ваш search-input должен быть виден хз смотреть, но вот что-то рабочая:

Js Fidlle: http://jsfiddle.net/8hrnkbaL/1/

Первой проблемой в вашей скрипке было то, что сапоги Ловушка была загружена до того JQuery, но JQuery должна быть нагрузка в первом ...

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 

     <div class="container"> 

      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <a class="navbar-brand" href="#">Brand Name</a> 
      </div> 

      </div> 

      <div style="clear:both"></div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Highlights</a></li> 
        <li><a href="#">Test Yourself</a></li> 
        <li><a href="#">Interesting Questions</a></li> 
        <li><a href="#">Ask Queries</a></li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">SignUp</a></li> 
        <li><a href="#">LogIn</a></li> 
       </ul> 
       <form class="navbar-form navbar-right" role="search"> 
          <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"/> 
    </div> 

       </form> 
      </div> 
     </div> 
    </nav> 

Answer 2

Я нарисовал этот пример для вас, это то, что я имел в виду, что он простой, Не стесняйтесь использовать его и редактировать для мобильных устройств css3. п.с. вы также можете использовать:

position:absolue;right:7px; 

для кнопки меню переключения справа для мобильного и вы также можете использовать:

position:absolue;left:7px; 

для ул слева, удач - Millzie:)

<html> 
<head> 
<title>My menu V.1</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
    $('.menu-right').click(function(){ 
    var animationTime = 800; 
    if($('.menu').css('height') == '60px'){ 
    $('.menu').animate({'height':'80px'}, animationTime, 'linear'); 
    }else if($('.menu').css('height') == '80px'){ 
    $('.menu').animate({'height':'60px'}, animationTime, 'linear'); 
    } 
    }); 
}); 
</script> 
<style type="text/css"> 
*{margin:0;padding:0;border:0;border-radius:0;font-family:sans;} 
div.menu{width:100%;height:60px;background-color:#660033;overflow:hidden;} 
ul.menu-ul{float:left;padding-left:7px;} 
li.menu-li{display:inline;list-style:none;font-size:15px;line-height:60px;margin-right:7px;} 
li.menu-li:hover{border-bottom:2px solid #FFFFFF;color:#FFFFFF;} 
div.menu-right{float:right;line-height:60px;font-size:15px;margin-right:7px;} 
div.menu-right:hover{color:#FFFFFF;} 
/*search form*/ 
input.search{width:900px;height:20px;margin-top:-3px;margin-left:7px;background-color:#FFFFFF;} 
input.search-button{width:70px;height:20px;margin-top:-3px;margin-left:4px;background-color:#FFFFFF;} 
</style> 
</head> 
<body> 
<div class="menu"> 
    <ul class="menu-ul"> 
    <li class="menu-li">Menu item one</li> 
    <li class="menu-li">Menu item two</li> 
    <li class="menu-li">Menu item three</li> 
    <li class="menu-li">Menu item four</li> 
    <li class="menu-li">Menu item five</li> 
    </ul> 
    <div class="menu-right">Search</div> 
    <form> 
    <input type="text" class="search" value="search for something" /> 
    <input type="submit" class="search-button" value="search" /> 
    </form> 
</div> 
</body> 
</html>