New Navbar If Less Space In Bootstrap 4.5

Code (Using Bootstrap 4.5): How my Code Shows:- When Screen is big:- When Screen is small:- How I want when the screen is small:- I tried to add extra navbar after the first na

Solution 1:

I have updated the jquery code to perform the task you desire. Please run and see the code snippet for details.

$(document).ready(function() {
  $(".self-first-ul").append('<li class="nav-item">A long sentence here, which does not fit on small screens.</li>');

  function updateFlexConfiguration(x) {
    if (x.matches) { // If media query matches
      $("nav").css("display", "flex");
      $("a").css("order", 0);
      $("button").css("order", 1);
      $("ul").css("order", 2);
    } else {
      $("nav.navbar").css("display", "flex");
      $("a").css("order", 0);
      $("ul").css("order", 1);
      $("button").css("order", 2);
      $("div").css("order", 2);
    }
  }
  const navBarPadding = 32;
  var navItemsWidth = $("a").outerWidth(true) + $("button").outerWidth(true) + $(".self-first-ul").outerWidth(true) + navBarPadding;
  var x = window.matchMedia("(max-width: " + navItemsWidth + "px)");
  updateFlexConfiguration(x); // Call listener function at run time
  x.addListener(updateFlexConfiguration); // Attach listener function on state changes

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="http://localhost/project/">Name</a>

  <ul class="navbar-nav self-first-ul">
  </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 ml-auto">
      <li class="nav-item">
        <a class="nav-link" href=""><img src="" alt="" title="" width="30" height="30" loading="lazy" />&nbsp;
          <span>1</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Update: To center the long text

$(document).ready(function() {
  // Add text center to align the text
  $(".self-first-ul").append('<li class="nav-item text-center">A long sentence here, which does not fit on small screens.</li>');

  function updateFlexConfiguration(x) {
    if (x.matches) { // If media query matches
      $("nav").css("display", "flex");
      $("a").css("order", 0);
      $("button").css("order", 1);
      $("ul").css("order", 2);
      $("ul").css("flex-grow", 1); // to take up remaining space so that text can be centered
    } else {
      $("nav.navbar").css("display", "flex");
      $("nav.navbar").css("justify-content", "space-between"); // Set space between the flex-items
      $("a").css("order", 0);
      $("ul").css("order", 1);
      $("ul").css("flex-grow", 0); // Set ul not grow with the remaining space
      $("button").css("order", 2);
      $("div").css("order", 2);
      $("div").css("flex-grow", 0); // Set div not grow with the remaining space
    }
  }
  const navBarPadding = 32;
  var navItemsWidth = $("a").outerWidth(true) + $("button").outerWidth(true) + $(".self-first-ul").outerWidth(true) + navBarPadding;
  var x = window.matchMedia("(max-width: " + navItemsWidth + "px)");
  updateFlexConfiguration(x); // Call listener function at run time
  x.addListener(updateFlexConfiguration); // Attach listener function on state changes

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="http://localhost/project/">Name</a>

  <ul class="navbar-nav self-first-ul">
  </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 ml-auto">
      <li class="nav-item">
        <a class="nav-link" href=""><img src="" alt="" title="" width="30" height="30" loading="lazy" />&nbsp;
          <span>1</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Solution 2:

You can show or hide specific elements in your HTML depending on the responsive utilities of bootstrap doc's: https://getbootstrap.com/docs/4.5/utilities/display/

Check the "d-none d-md-block d-xl-block" or "d-block d-sm-block d-xs-block d-md-none d-lg-none d-xl-none" ....

The following example should require your needs somehow, though you will have to play around with it to find your solution:

    <div class="container">
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- Will be shown for bigger viewports -->
        <div class="d-none d-md-block d-xl-block">Header viewport md + xl</div> 

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <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">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>      

      <!-- Will be shown for smaller viewports -->
      <div class="d-block d-sm-block d-xs-block d-md-none d-lg-none d-xl-none">Header viewport sm + xs</div>
    </div>
  </div>
</div>