Bootstrap Icon is moving down the toggler navbar

Question

I have my bootstrap nav here where in there is an icon on the toggler. See image below.

As you can see on the image above both the of the help button and the user icon was place under which I need to put the icon right beside the mobile toggler icon on mobile view like this:

Currently here's my HTML:

  <nav class="navbar navbar-expand-md navbar-light navbar-right">
      <a class="navbar-brand logo" href="#">Website</a>
      <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">
            <a class="nav-link" href="#">Home.</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Work</a>
          </li>
        </ul>

        <ul class="nav justify-content-md-end">
          <li class="nav-item">
            <a class="nav-link btn btn-primary" href="#">Help</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-user fa-lg"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>

You can check the actual jsfiddle here: https://jsfiddle.net/9gcqu7zj/1/

How can I move the right icon beside the navbar toggler on mobile view just like in the image above and make the Help link button just like a normal link on the navbar?

khushi khushi · Accepted Answer · 2020-12-03T10:30:37

They reason that this is happening is because you have included your user icon in the <div class="collapse navbar-collapse" id="navbarSupportedContent"> class which automatically collapses everything in it when the screen is made smaller. What you need to do is bring out the icon from the class like I have done below so that it doesn't collapse when the screen is made smaller

(Sorry about my poor formatting but I just want to explain what I mean.)

  <nav class="navbar navbar-expand-md navbar-light navbar-right">
  <a class="navbar-brand logo" href="#">Website</a>
  <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">
        <a class="nav-link" href="#">Home.</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Work</a>
      </li>
    </ul>

    <ul class="nav justify-content-md-end">
      <li class="nav-item">
        <a class="nav-link btn btn-primary" href="#">Help</a>
      </li>
      
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
        <ul>

  <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-user fa-lg"></i>
        </a>
        </li>
        </ul>
</nav>

Bootstrap Icon is moving down the toggler navbar

1 Answers