2 строки bootstrap navbar с иконкой,

Question

Я действительно новичок в бутстрапе, и я пытаюсь создать следующий навигатор.

---------------------------------------------------------------- 
| 75 | inconveniently long brand name in 60 pixel row | 
| pixel |              | 
| icon |    lots of menu items in 25 pixel row| 
---------------------------------------------------------------- 

можно отобразить более короткий (инициалы) фирменное наименование, используя скрытый/дисплей, когда экран слишком узок, и я хотел бы гамбургер для второго ряда пунктов меню, когда это необходимо.

Любые идеи о том, как достичь этого?

Answer 1

Вы можете узнать из моего примера здесь. :)

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

    <div class="container topnav"> 
     <img class="img-responsive" src="img/origin.png" alt="MACDONALD" style="margin: auto 200px !important;"> 
     <div class="navbar-header"> 

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 

       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand topnav"><img class="img-responsive" id="image-fix" src="img/origin.png" alt=""></a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin: auto 200px !important;"> 
      <ul class="nav navbar-nav "> 
       <li> 
        <a href="#about">Welcome</a> 
       </li> 
       <li> 
        <a href="#services">Services</a> 
       </li> 
      </ul> 

Здесь Demo

С уважением