after click on hamburger dialog open but that icon needs to replace with cross icon instead of hamburger #435 (#441)

Author: kapilG0

css/styles.css

@@ -12613,4 +12613,63 @@ fieldset:disabled .btn {
   .d-print-none {
     display: none !important;
   }
+}
+.navbar-toggler{
+  width:20px;
+  height: 20px;
+  position: relative;
+  transition: .5s ease-in-out;
+}
+.navbar-toggler,
+.navbar-toggler:focus,
+.navbar-toggler:active,
+.navbar-toggler-icon:focus{
+  outline: none;
+  box-shadow: none;
+  border:0
+}
+.navbar-toggler span{
+  margin: 0;
+  padding: 0;
+}
+.toggler-icon{
+   display: block;
+   position: absolute;
+   height: 5px;
+   width: 100%;
+   background: white;
+   border-radius: 1px;
+   opacity: 1;
+   left:0;
+   transform: rotate(0deg);
+   transition: .25s ease-in-out;
+}
+.middle-bar{
+  margin:0px;
+}
+.navbar-toggler .top-bar{
+  margin-top: 0;
+  transform: rotate(135deg);
+
+}
+.navbar-toggler .middle-bar{
+  opacity: 0;
+  filter:alpha(opacity=0)
+
+}
+.navbar-toggler .bottom-bar{
+  margin-top: 0px;
+  transform: rotate(-135deg);
+}
+.navbar-toggler.collapsed .top-bar{
+  margin-top: -20px;
+  transform: rotate(0deg);
+}
+.navbar-toggler.collapsed .middle-bar{
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.navbar-toggler.collapsed .bottom-bar{
+  margin-top: 20px;
+  transform: rotate(0deg);
 }

index.html

@@ -59,9 +59,12 @@
     <div class="container">
       <img height="32px" width="32px" src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" alt="logo" />
       <a class="navbar-brand" href="./index.html">CSEdge Learn</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+      <button  class="navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
         aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
+        <span class="toggler-icon top-bar"></span>
+        <span class="toggler-icon middle-bar"></span>
+        <span class="toggler-icon bottom-bar"></span>
+
       </button>
 
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -480,6 +483,8 @@ <h6>Quick Links</h6>
   <!-- Bootstrap core JS-->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="./ScrollToTop.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
 
 </body>