Adding a phone and map icon to the left of the bootstrap hamburger icon

Question

I have a basic bootstrap v3 website. When the navbar switches to the hamburger icon on smaller screens, I would like to add a Phone Icon (linking to a phone number) and a Map Ic

Answer 1

How to add uncollapsible icons to the Bootstrap Navbar

Let's use the Default navbar from the Bootstrap documentation.

1. Add the <ul class="nav navbar-nav"><li></li></ul> structure at the end of the <div class="navbar-header"> block. This structure will not be collapsed on a narrow screen.
2. Add the visible-xs class to the <ul> tag. Then it will be visible only on a narrow screen.
3. Add icons as items of this structure.
4. Add the pull-right class to each <li> tag. These items will be placed near the toggle-button.

Please check the result. Is it what you want to achieve?

<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>