How to keep icons in bootstrap 4 navbar on the top right for mobile view

Question

I have the following code, but I can't find a way to keep the icons on the top right when going into mobile view without duplicating them. I want the order to be:

on desktop: brand (far left) - nav links (middle) - account & cart icons (right hand side)

on small devices: brand (left corner) - account & cart icons (right hand side) - (right corner)

<nav class="navbar navbar-light bg-light navbar-expand-md justify-content-center-md">
        <a class="navbar-brand col-2" href="#">Navbar</a>
        <div class="navbar-collapse text-right col col-auto collapse show" id="navbarSupportedContent" style="">
            <ul class="navbar-nav mx-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="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
        <div class="col-auto col-md-3">
            <div class="row">
                <div class="col-sm-12 justify-content-end d-flex">
                        <a class="">
                          Icon
                        </a>
                    <a>
                        Icon
                    </a>
                    <a class="">Icon</a>
                    <div class="">
                        <button class="navbar-toggler" type="button" data-toggle="collapse" >
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

EDIT: I have made an easier repro here: https://jsfiddle.net/2dyLzvno/ It renders perfectly UNTIL the screen is mobile view and collapses. Then the links are above instead of below. I cant work out how to get around this.

EDIT 2:

CanUver · Answer 1 · 2020-06-03T20:11:10.417

I mentioned the changes I made in the comment lines. I must point out that you have made a very simple and useful structure such as bootstrap very complicated. Documentation I recommend you to review more carefully, especially the grid system. By the way, since you don't share your external css codes, the look may be a little different.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">




<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="navbar-collapse collapse show text-right" id="navbarSupportedContent">
    <!-- text-right added-->
    <ul class="navbar-nav mx-auto">
      <!--  change with mx-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="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0 ml-auto" type="submit">Search</button>
      <!-- ml-auto added-->
    </form>
    <div class="d-inline my-2 my-lg-0">
      <div class="formSearch ml-lg-auto ml-2 pl-lg-3 pl-0 d-inline-flex align-items-end">

        <a class="mobile-search-trigger d-lg-none d-flex" data-toggle="modal" data-target="#searchModal">
          <span class="mdi mdi-magnify"></span>
        </a>

        <a class="search__cancel">
          <span>Cancel</span>
        </a>
      </div>
      <a class="js-offcanvas-trigger user-panel-trigger d-flex justify-content-center align-content-center ml-lg-3 ml-2 c-button" data-offcanvas-trigger="user_panel" href="#user_panel" role="button" aria-controls="user_panel" aria-expanded="false"><span class="c-button__text">
            <span class="nav-icon">
              <span class="mdi mdi-account-outline"></span>
            </span>
          </span></a>
      <div class="cart__container">
        <div class="d-inline-flex align-items-center">
          <ul class="shopping-links">
            <li class="nav-item wishlist-container d-lg-block d-none">
              <a class="nav-link" href="/wishlist">
                <span class="wishlist-label hl-label">
                    <span class="mdi mdi-heart-outline"></span>
                </span>
                <span class="wishlist-qty d-none d-lg-flex">0</span>
              </a>
            </li>
            <li class="nav-item cart-container" id="topcartlink">
              <div class="btn-group dropdown">
                <a class="nav-link js-offcanvas-trigger c-button" data-offcanvas-trigger="right" href="#right" role="button" aria-controls="right" aria-expanded="false"><span class="c-button__text">
                      <span class="cart-label hl-label">
                        <span class="mdi mdi-cart-outline"></span>
                      </span>
                      <span class="cart-qty">0</span>
                    </span></a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

Updated Answer for your snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<nav class="navbar navbar-light bg-light navbar-expand-md">
  <!--  I removed unnecessary d-flex features.-->
  <!-- Site Logo -->
  <a class="navbar-brand col-2" href="#">Navbar</a>
  <!-- Site Logo End -->

  <!-- Toggle button should be here -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>
  <!-- Toggle button end -->

  <div class="navbar-collapse text-right collapse show w-100 " id="navbarSupportedContent">
    <!-- Links -->
    <ul class="navbar-nav mx-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="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>


    </ul>
    <!-- Links End -->

    <!-- There was an unnecessary column and row here.I removed it. Using rows in columns is not recommended.-->

    <!-- Icons -->
    <div class="col-md-3 pr-0">
      <a class="">
          Icon
        </a>
      <a>
          Icon
        </a>
      <a class="">Icon</a>
      <div class="">
        <!-- What is This ? -->
      </div>
    </div>
    <!-- Icons end -->
  </div>
  <!-- the problem with mobile view is that the collapse class doesn't actually cover the icons class. Mobile view determines collapse class, remember! I took the icons class into the collapse class. -->
</nav>


<!-- JAVASCRIPT for bootstrap -->

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Thanks, I tried your suggestions but it didn't quite work for me. I have created a jsfiddle to clarify as I realised by icons etc will cause issues reproducing — Fred Johnson, Jun 03 '20 at 17:16
I solved all your problems by looking at Js fiddle link and I mentioned them all in the comment lines. Updated answer as added. Please check it. — CanUver, Jun 03 '20 at 19:21
Hi, I have added an image of what I meant as it was clearly misleading. I'm trying to get the icons to stay top right, with the hamburger to the right of them on mobile. the dropdown just should contain the links that are in the middle of the medium+ screens — Fred Johnson, Jun 03 '20 at 20:10
You do that part, please. I've already dealt with more. I think I've fixed a lot of your problems and mistakes. You may need to use Media query. https://getbootstrap.com/docs/4.1/layout/overview/ Good Luck. — CanUver, Jun 03 '20 at 20:28
nothing changed was what i asked for though. i appreciate you trying to help but please dont state this has been answered as it will stop others from helping — Fred Johnson, Jun 03 '20 at 21:19

How to keep icons in bootstrap 4 navbar on the top right for mobile view

1 Answers1