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>');

  functionupdateFlexConfiguration(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

});

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"crossorigin="anonymous"><scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js"integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"crossorigin="anonymous"></script><navclass="navbar sticky-top navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="http://localhost/project/">Name</a><ulclass="navbar-nav self-first-ul"></ul><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav ml-auto"><liclass="nav-item"><aclass="nav-link"href=""><imgsrc=""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>');

  functionupdateFlexConfiguration(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

});

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"crossorigin="anonymous"><scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js"integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"crossorigin="anonymous"></script><navclass="navbar sticky-top navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="http://localhost/project/">Name</a><ulclass="navbar-nav self-first-ul"></ul><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav ml-auto"><liclass="nav-item"><aclass="nav-link"href=""><imgsrc=""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">
  <divclass="row"><divclass="col"><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><!-- Will be shown for bigger viewports --><divclass="d-none d-md-block d-xl-block">Header viewport md + xl</div><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarTogglerDemo02"aria-controls="navbarTogglerDemo02"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarTogglerDemo02"><ulclass="navbar-nav mr-auto mt-2 mt-lg-0"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav><!-- Will be shown for smaller viewports --><divclass="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>