Храните элементы навигации во всех размерах экрана

Question

Я пытаюсь создать загрузочный навигатор, на котором есть ссылки для навигации слева и некоторые значки пользователей справа.
На мобильном устройстве ссылки для навигации должны быть свернуты, но значки должны быть оставлены (или даже центрированы?) На значок гамбургера.

Он отлично выглядит на рабочем столе (ширина> 768 пикселей). Но на небольшой ширине значки отображаются ниже друг друга, а не рядом друг с другом.

Вот мой код до сих пор:

<nav class="navbar navbar-inverse navbar-fixed-top bo-header"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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" href="#">MY BRAND</a> 
    </div> 
    <!-- non-collapsing items --> 
    <div class="navbar-header navbar-right"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#"><i class="fa fa-envelope"></i></a></li> 
     <li><a href="#"><i class="fa fa-users"></i></a></li> 
     <li><a href="#"><i class="fa fa-wrench"></i></a></li> 
     </ul> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Nav Entry 1</a></li> 
     <li><a href="#">Nav Entry 2</a></li> 
     <li><a href="#">Nav Entry 3</a></li> 
     <li><a href="#">Nav Entry 4</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

Работа jsfiddle: http://jsfiddle.net/n9KtL/188/

Спасибо за вашу помощь!

Answer 1

Вот пример того, как вы можете сохранять свои значки внутри навигатора container (так что все элементы внутри navbar остаются согласованными), а затем помещайте значки, чтобы они оставались открытыми в видовых экранах под 768px.

@media (max-width: 767px) { 
 
    .navbar .navbar-right.navbar-top { 
 
    position: absolute; 
 
    margin-top: 4px; 
 
    right: 80px; 
 
    } 
 
    .navbar .navbar-right.navbar-top > li { 
 
    display: inline-block; 
 
    } 
 
    .navbar .navbar-right.navbar-top > li > a { 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse navbar-fixed-top bo-header"> 
 
    <div class="container"> 
 
    <ul class="nav navbar-nav navbar-right navbar-top"> 
 
     <li><a href="#"><i class="fa fa-envelope"></i></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-users"></i></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-wrench"></i></a> 
 
     </li> 
 
    </ul> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <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" href="#">MY BRAND</a> 
 
    </div> 
 
    <!-- non-collapsing items --> 
 
    <div class="collapse navbar-collapse" id="navbar"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li><a href="#">Nav Entry 1</a> 
 
     </li> 
 
     <li><a href="#">Nav Entry 2</a> 
 
     </li> 
 
     <li><a href="#">Nav Entry 3</a> 
 
     </li> 
 
     <li><a href="#">Nav Entry 4</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>