bug fixes on bs5 version

groups/home/bootstrap5/home1.css

@@ -72,6 +72,8 @@
     opacity: 0;
     pointer-events: none;
     position: absolute;
+    top: 100%;
+    margin-top: 0;
   }
   .show > .dropdown-menu.fade,
   .dropdown-menu.fade.show {
@@ -151,7 +153,8 @@
 
   /* style navbar */
   nav.navbar-light.main-nav-container {
-    background-color: white;
+    background-color: white !important;
+    background: white !important;
     border: none;
     font-size: 1.4em;
     color: var(--text);
@@ -211,7 +214,7 @@
     padding: 20px 0;
     border-radius: 5px;
     background-size: cover;
-    margin: -30px 0 30px 0;
+    margin: 0 0 30px 0;
   }
 
   /* style jumbotron */
@@ -441,13 +444,9 @@
     margin-left: 8px;
     color: var(--kbccorange);
   }
-  .show > button > .fancy-caret {
-    margin-bottom: -4px;
-    vertical-align: -4px;
-    display: inline-block;
-  }
-  .show > button > .caret-text {
-    vertical-align: -1px;
+  button.show > .fancy-caret {
+    position: relative;
+    top: 4px;
   }
 
   /* style footer */

groups/home/bootstrap5/home1.js

@@ -9,7 +9,7 @@ const hamburgerComponent = {
 const navigComponent = {
   // Fixed: Removed invalid nested <a> elements (WCAG 4.1.1)
   // Changed outer <a> to <div> and made dropdown-toggle a <button>
-  template: `<nav class="navbar navbar-expand navbar-light bg-light main-nav-container" aria-label="Main navigation">
+  template: `<nav class="navbar navbar-expand navbar-light main-nav-container" aria-label="Main navigation">
     <div class="container-fluid">
       <ul class="nav navbar-nav" id="navbar-center">
         <li v-for="(navmenu, navkey) in navlistofmenus"