Show Dynamically Added Navlinks When Added in Bootstrap Navbar

how to dynamically set the active class in bootstrap navbar?

You can use this javascript to add active class based on current url please try it

<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location;
        $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
        $('ul.nav a').filter(function() {
             return this.href == url;
        }).parent().addClass('active');
    });
</script>

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 Active State not working

You have included the minified Bootstrap js file and collapse/transition plugins while the docs state that:

Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.

Include only one.

and

For simple transition effects, include transition.js once alongside
the other JS files. If you're using the compiled (or minified)
bootstrap.js, there is no need to include this—it's already there.

So that could well be your problem for the minimize problem.

For the active class, you have to manage it yourself, but it's just a line or two.

Bootstrap 3:

$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

Bootply: http://www.bootply.com/IsRfOyf0f9

Bootstrap 4:

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

atleast one active class when dynamic tabs are removed inside div

When you close the tab, take the index of the tab. If it's the last one, then add the active class to the last tab, if first, then first, if is somewhere in the middle, then take the one from the left or from the right of the closed tab.

$(".close").on("click", function() {
      var elem = $(this).closest("li");

      if (elem.hasClass("active")) {
          var idx = elem.index(),
              remainingTabs = $("li");

          if (idx <= remainingTabs.length) {
              $(remainingTabs.get(idx - 1)).addClass("active");
          } else if (idx == 0) {
              $(remainingTabs.get(0)).addClass("active");
          }
      }

      // remove current tab
      $(".close", elem).unbind();
      elem.remove();
}

Bootstrap navbar does works when in full screen but not when condensed

Well, I am not sure if I understand the question pretty well,
but from what I understand I would move the login, register, and logoff into a div and apply a media query in the CSS to do what you ask for.

<style>
 @media only screen and (max-width: 990px) {
   .chnageMeWhenSmall {
    position: absolute;
    right: 60px;
    }
  }
</style>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{ url_for('home')}}">Test</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#">Pricing</a>
    </li>
  </ul>
     <div class="chnageMeWhenSmall">
    {% if current_user.is_authenticated %}
        <span class="navbar-text mb-2 mb-lg-0">
            <a href="{{ url_for('logout')}}" class="me-4">Logout</a>
        </span>
    {% else%}
        <span class="navbar-text mb-2 mb-lg-0">
            <a href="{{ url_for('login')}}" class="me-4">Login</a>
        </span>
        <span class="navbar-text mb-2 mb-lg-0">
            <a href="{{ url_for('register')}}" class="me-4">Register</a>
        </span>
    {% endif %}
     </div>
    </div>
  </div>
</nav>

Bootstrap: In Navbar, Show Different Content Based on Li Link Hovered in a Single Location?

I made a Fiddle based on your image.
It uses bootstraps right section for the menu.

I have applied a loop to each link:

$.each($('a'), function() {
    $(this).hover(function() {
        $('.placeholder').html($(this).html());
    });
});

It simply takes the HTML inside a tag and places in the menu item with the class placeholder.

Update:

In your case your links are bit more complex so the selector for the loop would look like this:

$.each($('a > span'), function() {
    // do stuff here
});

This fetches all links in your document and then the span element inside that.

Aaand finally a Fiddle for the HTML you have provided here.

Code below edited since loops are unecessary:

$('a').hover(function() {
    $('.placeholder').html($(this).html());
});

$('a > span').hover(function() {
    // do stuff here
});