Сделать отзывчивый Bootstrap navbar без меню гамбургера

Question

Я создаю проект портфолио, используя Bootstrap. Я хотел, чтобы навигатор был отзывчивым, но не использовал меню гамбургеров по умолчанию. Вместо этого у меня есть медиа-запрос, который изменяет текстовые ссылки на значки. Однако, когда размер экрана изменяется до 767 и ниже, значки сворачиваются во вторую строку. Я хочу, чтобы они просто приблизились к заголовку навигатора.

Я искал весь день, но все остальные, похоже, спрашивают о добавлении меню гамбургера.

Любые предложения?

http://codepen.io/anthkris/pen/xwpPrE/

<!-- Fixed navbar --> 
<nav id="mobile-nav" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container nav-mobile"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">K. Anthony</a> 
    </div> 
    <div> 
     <ul class="nav navbar-nav navbar-left"> 
     <li> 
      <a href="#heading"><i class="fa fa-home"></i></a> 
     </li> 
     <li> 
      <a href="#portfolio"><i class="fa fa-file-photo-o"></i></a> 
     </li> 
     <li> 
      <a href="#about-me"><i class="fa fa-book"></i></a> 
     </li> 
     <li> 
      <a href="#contact"><i class="fa fa-envelope"></i></a> 
     </li> 
     </ul> 
    </div><!-- #mobile-nav --> 
    </div> 
</nav> 

Answer 1

@media only screen and (max-width : 768px) { 
    .navbar-header { 
     display: inline-block; 
     float: left; 
    } 
} 

Попробуйте медиа запрос, это может помочь вам.

Answer 2

Если вы хотите, чтобы навигационный остаться такой же и просто изменить иконки, вы можете попробовать:

@media only screen and (max-width : 768px) { 
    .navbar-header { 
     float: left; 
    } 
    .navbar-nav { 
     float: right; 
    } 
} 

Это будет тянуть заголовок, который ваше имя слева и иконки справа. Сохраняя это так же, как если бы вы имели это со словами.