Bootstrap4 navbar: how to right-align an icon and keep it out of the toggle?

Question

I want to use the Twitter Bootstrap to layout my navbar so that there is "left", "middle" and "right" parts to it, where the middle part gets collapsed down under the navbar-toggler ("burger menu") when there's not enough space.

Codepen for a self-contained example: https://codepen.io/fiver/pen/eKJOMG

The part I have wrong (I think) is the definiton of the "icon" elements:

<nav className="navbar navbar-expand-sm navbar-dark bg-dark ">
  <a className="navbar-brand" href="#">ExampleApp</a>
  <button className="navbar-toggler" type="button"
    data-toggle="collapse" 
    data-target="#navbarNav" >
    <span className="navbar-toggler-icon"/>
  </button>

  <a className="navbar-brand navbar-right" href="#">Icon1</a>

  <div id="navbarNav" className="collapse navbar-collapse" >
    <ul className="navbar-nav">
      <li nav items></li>
      ....
    </ul>
  </div>

  <a className="navbar-brand navbar-right" href="#">Icon2</a>
</nav>

When there's enough horizontal space that the navbar-toggle is not needed, Icon1 is in the wrong place:

But when the navbar-toggler is active, and the menu is expanded, Icon2 is in the wrong place:

At the moment, I'm only planning on having one of the Icon menu items in my app. I'm just using two here to illustrate the different behaviour when I put the icon in the two different places.

Note both placements seem to work the way I want when the navbar-toggler menu is active, but collapsed:

What do I need to do to make the icon act like Icon2 when there's lots of space navbar-toggler and Icon1 when space is constrained?

mahan · Answer 1 · 2018-06-04T06:20:48.220

Use d-flex and justify-content-between for the navbar-container.
Use w-100 for the nav
Use <a class="navbar-brand navbar-right" href="#">Icon1</a> right after the ExampleApp anchor tag.
Use ml-auto for the navbar-toggler
Use <a class="navbar-brand navbar-right pt-2" href="#">Icon2</a> after the nav tag.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />

<div style="background-color: rgb(52, 58, 64);">
  <div id="navbar-container" class="container d-flex justify-content-between">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark  w-100">
      <a class="navbar-brand" href="#">ExampleApp</a><a class="navbar-brand navbar-right" href="#">Icon1</a>
      <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarNav" class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="#">Item 1</a></li>
          <li class="nav-item "><a class="nav-link" href="#">Item 2</a></li>
          <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Options</a>
            <div class="dropdown-menu"><a class="dropdown-item" href="#">Drop Item 1</a><a class="dropdown-item" href="#">Drop Item 2</a>
              <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Drop Item 3</a></div>
          </li>
        </ul>
      </div>
    </nav><a class="navbar-brand navbar-right pt-2" href="#">Icon2</a></div>
</div>

https://codepen.io/anon/pen/NzxqxW

Update

If you want to align both of the icons on the right side, use this method.

Use d-flex and justify-content-between for the navbar-container.
Use w-100 for the nav
Use ml-auto for the navbar-toggler.
Create a new d-flex justify-content-between div outside of the nav for the two icons.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />

<div style="background-color: rgb(52, 58, 64);">
  <div id="navbar-container" class="container d-flex justify-content-between">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark  w-100">
      <a class="navbar-brand" href="#">ExampleApp</a>
      <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarNav" class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="#">Item 1</a></li>
          <li class="nav-item "><a class="nav-link" href="#">Item 2</a></li>
          <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Options</a>
            <div class="dropdown-menu"><a class="dropdown-item" href="#">Drop Item 1</a><a class="dropdown-item" href="#">Drop Item 2</a>
              <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Drop Item 3</a></div>
          </li>
        </ul>
      </div>
    </nav>
    <div class="d-flex justify-content-between pt-2">
      <a class="navbar-brand navbar-right" href="#">Icon1</a>
      <a class="navbar-brand navbar-right" href="#">Icon2</a></div>
  </div>
</div>

https://codepen.io/anon/pen/RJrxpL

This question has been marked as duplicate and I agree with that. I will likely delete this question - you answer has value though, if you want to move your answer over to the indicated question, I will upvote it over there. — Shorn, Jun 04 '18 at 02:37
@Shorn Updated the answer. It is totally fine if you delete your question. I will not waste my time anymore. — mahan, Jun 04 '18 at 06:22
I'm not going to delete this question as per https://meta.stackoverflow.com/a/265737/924597 (though I did end up using the answer from that question because it's smaller). — Shorn, Jun 06 '18 at 00:29

Bootstrap4 navbar: how to right-align an icon and keep it out of the toggle?

1 Answers1

Update