navbar collapse issue fixed

Author: codeperfectplus

src/static/css/style.css

@@ -102,13 +102,16 @@ body {
 }
 
 .navbar-toggler {
-    border: none;
+    background: linear-gradient(135deg, #e0f7fa, #b2ebf2); /* Light blue gradient background */
+    border: none; /* Optional: Remove the default border */
 }
 
 .navbar-toggler-icon {
-    background-image: url('data:image/svg+xml;charset=utf8,...');
+    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 viewBox%3D%220 0 30 30%22%3E%3Cpath stroke%3D%22rgba(255, 255, 255, 1.0)%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-miterlimit%3D%2210%22 d%3D%22M4 7h22M4 15h22M4 23h22%22/%3E%3C/svg%3E');
+    /* Change the stroke color inside the URL to customize the icon color */
 }
 
+
 /* Responsive adjustments */
 @media (max-width: 992px) {
     .navbar-nav {

src/templates/base/base.html

@@ -22,7 +22,8 @@
     <!-- jQuery -->
     <script src="{{ url_for('static', filename='js/main.js')}}"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>    
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
     {% block extra_scripts %}{% endblock %}
     {% include 'ext/footer.html' %}
 </body>