Bootstrap v4 uncollapsible icon to the left of the bootstrap hamburger icon

Question

I have Bootstrap v4 problem. When the navbar switches to the hamburger icon on small screen, I'd like to add a phone icon so mobile users can easily use it, never scrolling down to the Contact section.

I've been trying to use Bootstrap docs regarding navbar and an example from Adding a phone and map icon to the left of the bootstrap hamburger icon (adjusting it to Bootstrap v4 by using d-md-none instead of obsoleted visible-xs). Also I've read through and tried every suggestion from Bootstrap 4 align navbar item to the right playing with mr-*, ml-*, justify-*, float-* but no success - when I resize viewport to the smaller screen, the icon appears yet it keeps get aligned under the brand or hamburger menu icon depending on what I use - mr-* or ml-*, but I want it to stick to the left of the hamburger icon and do not mess around.

Here is the latest iteration of what I have:

<!-- Navbar Start -->
  <nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a href="index.html" class="navbar-brand"><img class="img-fluid" src="img/logo.png" alt=""></a>

    <ul class="navbar-nav d-md-none">
         <li class="nav-item ml-auto">
            <a class="nav-link page-scroll" href="tel:+1234567890"><i class="lnr lnr-phone-handset"></i></a>
         </li>
    </ul>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
          <i class="lnr lnr-menu"></i>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="main-navbar">
        <ul class="navbar-nav mr-auto w-100 justify-content-end">
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#hero-area">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#services">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>

score 0 · Accepted Answer · answered Feb 26 '18 at 10:04

One way to solve this is to position your phone icon after the navbar-brand (and before the toggler) in the HTML and then add the classes d-block d-lg-none ml-auto mr-3 to it.

d-block will show it by default i.e. from the smallest screen size on. d-lg-none will hide it for screens that are large (lg) and up. ml-auto (margin-left:auto) will push it to the right. And mr-3 is "margin-right 3 units" to give it a bit of spacing.

Here's a working code snippet (click "run code snippet" and expand to full page):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>

    <ul class="navbar-nav d-block d-lg-none ml-auto mr-3">
        <li class="nav-item">
            <a class="nav-link" href="tel:+1234567890"><i class="fa fa-mobile"></i></a>
        </li>
    </ul>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Note that I used a fresh, clean navbar for the code snippet above because your code was a bit of mess. So, start with this clean snippet and then add your custom parts one by one constantly making sure that your additions don't break anything.

Thank you you solution work perfectly per se. Yet I am still struggling with my issue - looks like it is more of а CSS problem than Bootstrap itself: using either of your solutions I get necessary icon but no hamburger while resizing the viewport. When I add that navbar-header (which is third-party CSS) I have exactly the same situation as in the very beginning: both icons appear but phone keeps get aligned under brand... Anyway, thank you for helping — theswix, Feb 26 '18 at 16:58

score 0 · Answer 2 · answered Feb 26 '18 at 11:46

There is no navbar-header class in Bootstrap 4. Instead do this..

Move the navbar-brand out of navbar-header
Change navbar-header to ml-auto d-flex flex-nowrap

This will put the icon and hamburger together on the right in a flexbox div that doesn't wrap. I also added small margin to the right of the phone icon (mr-2) but that's optional.

https://www.codeply.com/go/dLJ5GyyAQV

<nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo navbar-dark">
    <div class="container">
        <a href="index.html" class="navbar-brand"><img class="img-fluid" src="//placehold.it/100x30" alt=""></a>
        <div class="ml-auto d-flex flex-nowrap">
            <ul class="navbar-nav d-md-none">
                <li class="nav-item ml-auto">
                    <a class="nav-link page-scroll mr-2" href="tel:+1234567890"><i class="fa fa-phone"></i></a>
                </li>
            </ul>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="main-navbar">
            <ul class="navbar-nav mr-auto w-100 justify-content-end">
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#hero-area">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Thank you, @ZimSystem and @WebDevBooster - both of your solutions work perfectly per se. Yet I am still struggling with my issue - looks like it is more of а CSS problem than Bootstrap itself: using either of your solutions I get necessary icon but no hamburger while resizing the viewport. When I add that `navbar-header` (which is third-party CSS) I have exactly the same situation as in the very beginning: both icons appear but phone keeps get aligned _under_ brand... Anyway, thank you for helping — theswix, Feb 26 '18 at 16:56

Bootstrap v4 uncollapsible icon to the left of the bootstrap hamburger icon

2 Answers2