Добавление значка телефона и карты слева от значка гамбургера начальной загрузки

Question

У меня есть базовый сайт bootstrap v3. Когда навигационная панель переключается на значок гамбургера на меньших экранах, я хотел бы добавить значок телефона (ссылку на номер телефона) и значок карты (ссылку на карты Google), чтобы пользователи могли легко получить к ним доступ. Я попытался добавить значок телефона слева от гамбургера, добавив код перед кнопкой .navbar-toggle, но я не могу понять, как сделать его отзывчивым, как значок гамбургера. Я могу позиционировать его, но это не делает его отзывчивым.

Вот мой текущий код. Я попытался заставить его работать только с иконкой телефона, но мне также хотелось бы, чтобы значок карты располагался рядом с ним. Большая часть стилей была скопирована из стиля .nav-bar-toggle в файле bootstrap.min.css.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.navbar i { 
 
    font-size: 200%; 
 
    position: relative; 
 
    padding: 9px 10px; 
 
    margin-top: 8px; 
 
    margin-right: 15px; 
 
    margin-bottom: 8px; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a href="#"><img src="img/autohaus-logo.png" class="navbar-brand"></a> 
 
     <a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a> 
 
     <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">      
 
     <span class="sr-only">Toggle Navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

Как добавить uncollapsible иконки в Bootstrap Navbar

Давайте использовать Default navbar из документации Bootstrap.

1. Добавить структуру <ul class="nav navbar-nav"><li></li></ul> в конце блока <div class="navbar-header">. Эта структура не будет свернута на узком экране.
2. Добавить the visible-xs class в тег <ul>. Тогда он будет виден только на узком экране.
3. Добавить иконки в качестве элементов этой структуры.
4. Добавить the pull-right class каждому <li> тег. Эти предметы будут помещены рядом с переключателем.

Пожалуйста, проверьте результат. Это то, чего вы хотите достичь?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false"> 
 
     <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="#">Brand</a> 
 
     <ul class="nav navbar-nav visible-xs"> 
 
     <li class="pull-right"><a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a></li> 
 
     <li class="pull-right"><a href="#"><i class="glyphicon glyphicon-map-marker"></i></a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#">Left</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Right</a></li> 
 
     <li><a href="#">Right</a></li> 
 
     <li><a href="#">Right</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>