Bootstrap Navbar List Items/Links Not Showing

Bootstrap Navbar list items/links not showing

In Bootstrap 4, the navbar-expand-* class is needed to show the horizontal navbar, otherwise it will collapse into it's mobile state.

Make sure you've referenced it properly in the Codepen as https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

Or, use Codeply, and it will include the all the relevant libraries for you:
Bootstrap 4 on Codeply

Here's the Navbar with Bootstrap 4.0.0:
http://www.codeply.com/go/SmEyy7rg5S

<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

Related: Disable responsive navbar in bootstrap 4

Bootstrap 4 navbar not showing navbar items

That's because the navbar-expand-* class is missing in your code.

I've added navbar-expand-md in the code snippet below. This class expands the navbar (from the default collapsed state) on screens that are medium (md) or larger.

If you change that to navbar-expand-lg, the expansion will happen form large (lg) screens onwards etc.

And if you want your navbar items to be expanded permanently i.e. on all screen sizes, use the navbar-expand class.

You also need a toggler in order to open and close the navbar items when the navbar is collapsed. That toggler is currently missing in your code as well.

Click "run code snippet" below and expand to full page for testing:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-faded">    <a class="navbar-brand" onclick="goBack()">        <img src="https://placehold.it/30" width="30" height="30" class="d-inline-block align-top" alt="Sample Image">        Back to Course    </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 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="#">Disabled</a>            </li>        </ul>    </div></nav>

Why is my bootstrap navbar button not showing the nav items on mobile?

Make sure you're including jQuery and the Bootstrap JavaScript on your page - instructions here, but this is the code you need to add before your closing </body> tag:

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

Bootstrap nav item not showing on mobile device

The HTML is not structured correctly (a should be inside li, and li is missing a closing bracket). But, the issue is you've named 2 elements with the same id which won't work. Just use a classname (ie: navbar-alt) to toggle both collapse navbars and target this class in data-target.

https://www.codeply.com/go/BaZHtvCoAR

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Jatitree</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-alt" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse navbar-alt" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link" id="home" href="<?php echo base_url();?>">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="<?php echo base_url();?>BuyCars">Buy Goods</a>
            <a class="nav-item nav-link" href="<?php echo base_url();?>SellGoods">Sell Goods</a>
        </div>
    </div>
    <div class="collapse navbar-collapse justify-content-end navbar-alt">
        <ul class="navbar-nav">
            <li class="nav-item nav-link">
                Logout
            </li>
        </ul>
    </div>
</nav>

Bootstrap 5 Navbar doesnt open links set in href

You have drop down attribute, class in wrong place.

For example

data-bs-toggle="dropdown" aria-expanded="false"

This is no need for menu item that is not drop down items.

Full edited:

 <nav class="navbar fixed-top navbar-light bg-light border-bottom border-secondary py-0 px-0">
   <div class="container-fluid" id="navbar-custom-markup">
     <a href="" class="navbar-brand p-2" id="navbar-hlink-markup"><img src="https://robotica.media/wp-content/uploads/2021/07/Robotica-White-300x100.png" id="navbar-logo-markup" alt="Robotica Logo" title="Robotica Logo" aria-label="Robotica Logo"></a>
     <ul class="navbar-nav d-flex flex-row justify-content-center text-center" id="navbar-media-markup">
       <li class="nav-item px-1"><a href="#" class="nav-link text-white px-1 py-1 navbar-bold-markup" alt="Link to Cassie Gazette Page" title="Link to Cassie Gazette Page" aria-label="Link to Cassie Gazette Page">Cassie Gazette</a></li>
       <li class="nav-item px-1"><a href="welcome-to-the-zoo.html" class="nav-link text-white px-1 py-1 navbar-bold-markup" alt="Link to Welcome to the Zoo Page" title="Link to Welcome to the Zoo Page" aria-label="Link to Welcome to the Zoo Page">Welcome to the Zoo</a></li>
       <li class="nav-item px-1"><a href="#" class="nav-link text-white px-1 py-1 navbar-bold-markup" alt="Link to Benefits and Features Page" title="Link to Benefits and Features Page" aria-label="Link to Benefits and Features Page">Benefits and Features</a></li>
     </ul>
     
     
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon alin"></span>
     </button>
     <div class="collapse navbar-collapse border-top" id="navbarNavDarkDropdown">
       <ul class="navbar-nav my-2">
         <li class="nav-item d-flex f-row">
           <a class="nav-link text-white px-1 py-1 navbar-bold-markup" href="index.html" id="navbarDarkDropdownMenuLink" role="button" alt="Link to Cassie Gazette Page" title="Link to Cassie Gazette Page" aria-label="Link to Cassie Gazette Page">
             Cassie Gazette
           </a>
           <a class="nav-link mx-1 text-white px-1 py-1 navbar-bold-markup" href="welcome-to-the-zoo.html" id="navbarDarkDropdownMenuLink" role="button" alt="Link to Welcome to the Zoo Page" title="Link to Welcome to the Zoo Page" aria-label="Link to Welcome to the Zoo Page">
             Welcome to the Zoo
           </a>
           <a class="nav-link text-white px-1 py-1 navbar-bold-markup" href="#" id="navbarDarkDropdownMenuLink" role="button" alt="Link to Benefits and Features Page" title="Link to Benefits and Features Page" aria-label="Link to Benefits and Features Page">
             Benefits and Features
           </a>
         </li>
       </ul>
     </div>
   </div>
 </nav>

See it in action.

Please compare with your current HTML to see that what was changed. Maybe use Winmerge, Notepad++ and plugin, or your code editor, etc.

Bootstrap navbar content not showing when collapsed

Here you go...

Change:

data-toggle="collapse" (Bootstrap 4) to data-bs-toggle="collapse" (Bootstrap 5)
data-target="#navbarNav" (Bootstrap 4) to data-bs-target="#navbarNav" (Bootstrap 5)

#navbarLogo {
  width: 10rem;
  height: auto;
}

.navbar-brand img {
  height: 50px;
  width: auto;
  padding-left: 30px;
}

#linkText {
  font-family: hdFontMedium;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

#navbarNav {
  justify-content: flex-end;
  align-items: center;
}

#navbarListItem {
  padding-left: 10px;
  padding-right: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap css-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href=/static/main.css>
  <link rel="stylesheet" href=/static/style.css>
  <link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
  <title>Dimsum Siblings</title>
  <!--font-awesome including icon for shopping cart-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>


  <nav class="navbar navbar-expand-lg navbar-light bg-secondary" id="navbar">
    <a class="navbar-brand navbar-left" href="/" id="navbarLogoLink">
      <img src="static/media/logoWithText.png" alt="Sample Image" id="navbarLogo">
    </a>

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

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">ABOUT US</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="/dimsumshop">
            <h3 id="linkText">ORDER DIMSUM BOX</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">INSTRUCTIONS</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">CONTACT</h3>
          </a>
        </li>

      </ul>
    </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>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

</body>

</html>

Bootstrap Navbar toggle icon button not showing nav items on click?

Works perfectly fine, you must be missing some script files.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Admin Header</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item" routerLinkActive="active">
              <a class="nav-link" routerLink="./home">Home
                            <span class="sr-only">(current)</span>
                        </a>
            </li>
            <li class="nav-item" routerLinkActive="active">
              <a class="nav-link" routerLink="./about">About</a>
            </li>
            <li class="nav-item" routerLinkActive="active">
              <a class="nav-link" routerLink="./services">Services</a>
            </li>
            <li class="nav-item" routerLinkActive="active">
              <a class="nav-link" routerLink="./contact">Contact</a>
            </li>
            <li class=" btn-primary nav-item text-white" role="button">
              <a class="nav-link text-white" (click)="logOut()">logout</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

  <!-- JavaScript -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Bootstrap Navbar List Items/Links Not Showing