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 Icon (linking to google maps) so mobile users can easily access them. I tried adding a phone icon to the left of the hamburger, by adding the code just before the .navbar-toggle button, but I can't figure out how to make it responsive like to hamburger icon. I can position it, but that doesn't keep it responsive.
Here is my current code. I tried to get it working with just the phone icon, but I would also like a map icon to be positioned next to it as well. Most of the styling was copied from the .nav-bar-toggle
class styling in the bootstrap.min.css
file.
@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>
How to add uncollapsible icons to the Bootstrap Navbar
Let's use the Default navbar from the Bootstrap documentation.
<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.visible-xs
class to the<ul>
tag. Then it will be visible only on a narrow screen.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?