Bootstrap Navbar: Nothing Is Displayed on Smaller Devices

Bootstrap NavBar with no content on small screens

You need to include JQuery before Bootstrap in the header since bootstrap requires JQuery in order to work correctly.

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  </head>

Otherwise you'll get an error since Bootstrap is referencing a function that does not exist in that point in time.

hope that helps.

Bootstrap 4 navbar not working properly on small screen sizes

Add navbar-light or navbar-dark (for a dark background) to your navbar - these classes are responsible to add the hamburger. See demo below:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" /><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" /><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light navbar-expand-lg primary">        <a class="navbar-brand" href="/">Blazor Finances</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">            <span class="navbar-toggler-icon"></span>        </button>        <div id="navbarNavDropdown" class="navbar-collapse collapse">            <ul class="navbar-nav mr-auto">                <li class="nav-item active">                    <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>                </li>            </ul>            <ul class="navbar-nav">                <li class="nav-item">                    <a id="login-register-btn" class="btn btn-primary primary" href="/login">Login/Register</a>                </li>            </ul>        </div>    </nav>

Bootstrap mobile menu not appearing

It's the navbar-light class which specifies the background for the toggle button. Add that to the nav element.

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.

https://getbootstrap.com/docs/5.1/components/navbar/#how-it-works

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar navbar-light navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Hello world</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false" aria-lable="Toggle Navigation">
      <span class = "navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="toggleMobileMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link link-dark" href="#">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-dark" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-dark" href="#">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-dark" href="#">Book</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Twitter-bootstrap: navbar not showing up on small screens

Currently bootstrap 3 doesnt support non "sm" breakpoint "collapse" of menu items. (You appear to be getting some Bootstrap v4 classes mixed in ie. navbar-toggleable-md).

Similarly, you're trying to refer to the v4 toggler using navbar-toggler and navbar-toggler-right when v3 uses navbar-toggle and navbar-toggle-right.

The last issue is that the navbar-light colors are also v4, and so navbar-toggle's icon-bar appears white on white without additional css.

Additional CSS

.navbar-light .navbar-toggle .icon-bar {
    background: black;
}

Updated HTML

<nav class="navbar navbar-light">
    <div class="navbar-header">
        <button class="navbar-toggle navbar-toggle-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria="navbarSupportedContent" aria-expanded="false" aria-label="toggle navigation"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <a class="navbar-brand" href="#">Retail Mobile</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="nav navbar-nav">
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/home']"><span class="glyphicon glyphicon-home"></span> Home</a></li>
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/checkBarcodes']"><span class="glyphicon glyphicon-barcode"></span> Check Barcodes</a></li>
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/stockTake']"><span class="glyphicon glyphicon-folder-open"></span> Stock Take</a></li>
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/settings']"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
        </ul>
    </div>

</nav>

JSFIDDLE

Angular App: bootstrap navbar doesn't show up on small screen sizes

Remove hidden-sm hidden-xs from your nav tag's class.

Edit:

Ignore the previous answer. Add bg-dark to your second nav class.

<nav class="navbar bg-dark visible-xs visible-sm">

Working demo at Stackblitz.

Bootstrap navbar-toggler-icon not visible but functioning normally

Try using navbar navbar-light instead of navbar navbar-inverse.

Bootstrap 4 is a major rewrite of the older Bootstrap and this was changed

Bootstrap Migration guide

Navbar toggler (bootstrap 4) is working but invisible. I can't see it but can be clicked and it is working

There is a typo in your code... navbar-lt seems to be wrong

change <nav class="navbar navbar-lt navbar-expand-sm fixed-top nb">
into <nav class="navbar navbar-light navbar-expand-sm fixed-top nb">

and you'll be on your way...

.nb {  height: 100px;  letter-spacing: 0.2em;  line-height: 70px;  letter-spacing: 0.2em;  text-transform: uppercase;  text-align: left;  margin: 0px auto;  color: black;}
.navbar-brand {  padding-right: 20px;  color: black;  margin-left: 80px;  padding-right: 20px;}
.nav-item {  color: black;  font-family: "Lato";}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light navbar-expand-sm fixed-top nb">  <div class="container">    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">                    <i class="navbar-toggler-icon"></i>                </button>
    <a class=" mr-auto navbar-brand myfont" href=".\index.html">Sidhant Aggarwal</a>    <div class="collapse navbar-collapse" id="Navbar">      <ul class="navbar-nav mr-auto">        <li class="nav-item"> <a class="nav-link" href="#"> About Me</a></li>        <li class="nav-item"> <a class="nav-link" href="#"> Resume</a></li>        <li class="nav-item"> <a class="nav-link" href=".\contactus.html">Certifications</a></li>      </ul>    </div>  </div></nav>