updated code

public/assets/css/main.css

@@ -414,7 +414,7 @@ section {
     inset: 0;
     padding: 50px 0 10px 0;
     margin: 0;
-    background: rgba(27, 47, 69, 0.9);
+    background: rgba(255, 255, 255, 0.9);
     overflow-y: auto;
     transition: 0.3s;
     z-index: 9998;

public/assets/js/main.js

@@ -34,6 +34,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const mobileNavHide = document.querySelector('.mobile-nav-hide');
 
   document.querySelectorAll('.mobile-nav-toggle').forEach(el => {
+    console.log(el)
     el.addEventListener('click', function(event) {
       event.preventDefault();
       mobileNavToogle();

public/index.html

@@ -10,8 +10,8 @@
   <meta content="" name="keywords">
 
   <!-- Favicons -->
-  <link href="assets/img/logo.png" rel="icon">
-  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
+  <link href="./assets/img/logo.png" rel="icon">
+  <link href="./assets/img/apple-touch-icon.png" rel="apple-touch-icon">
 
   <!-- Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -21,15 +21,15 @@
     rel="stylesheet">
 
   <!-- Vendor CSS Files -->
-  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
-  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
-  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
-  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
-  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
+  <link href="./assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link href="./assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
+  <link href="./assets/vendor/aos/aos.css" rel="stylesheet">
+  <link href="./assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
+  <link href="./assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
+  <link href="./assets/vendor/remixicon/remixicon.css" rel="stylesheet">
 
   <!-- Template Main CSS File -->
-  <link href="assets/css/main.css" rel="stylesheet">
+  <link href="./assets/css/main.css" rel="stylesheet">
 
   <!-- =======================================================
   * Template Name: Nova - v1.3.0
@@ -59,15 +59,15 @@
   <div id="preloader"></div>
 
   <!-- Vendor JS Files -->
-  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-  <script src="assets/vendor/aos/aos.js"></script>
-  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
-  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
-  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
-  <script src="assets/vendor/php-email-form/validate.js"></script>
+  <script src="./assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+  <script src="./assets/vendor/aos/aos.js"></script>
+  <script src="./assets/vendor/glightbox/js/glightbox.min.js"></script>
+  <script src="./assets/vendor/swiper/swiper-bundle.min.js"></script>
+  <script src="./assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
+  <script src="./assets/vendor/php-email-form/validate.js"></script>
 
   <!-- Template Main JS File -->
-  <script src="assets/js/main.js"></script>
+  <script src="./assets/js/main.js"></script>
 </body>
 
 </html>
\ No newline at end of file

src/Components/TopNav.js

 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import { Link } from "react-router-dom";
+import './navigation'
 
 export default function TopNav() {
     return (
@@ -13,8 +14,8 @@ export default function TopNav() {
                         <h1 className="d-flex align-items-center" style={{ color: '#013E7B' }}>Novisync</h1>
                     </Link>
 
-                    <i className="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
-                    <i className="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
+                    <i style={{ color: '#013E7B' }} className="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
+                    <i style={{ color: '#013E7B' }} className="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
 
                     <nav id="navbar" className="navbar" >
                         <ul>

src/Components/navigation.js

+
+
+  /**
+   * Mobile nav toggle
+   */
+  const mobileNavShow = document.querySelector('.mobile-nav-show');
+  const mobileNavHide = document.querySelector('.mobile-nav-hide');
+
+  document.querySelectorAll('.mobile-nav-toggle').forEach(el => {
+    el.addEventListener('click', function(event) {
+      event.preventDefault();
+      mobileNavToogle();
+    })
+  });
+
+  function mobileNavToogle() {
+    document.querySelector('body').classList.toggle('mobile-nav-active');
+    mobileNavShow.classList.toggle('d-none');
+    mobileNavHide.classList.toggle('d-none');
+  }
+
+  /**
+   * Toggle mobile nav dropdowns
+   */
+  const navDropdowns = document.querySelectorAll('.navbar .dropdown > a');
+
+  navDropdowns.forEach(el => {
+    el.addEventListener('click', function(event) {
+      if (document.querySelector('.mobile-nav-active')) {
+        event.preventDefault();
+        this.classList.toggle('active');
+        this.nextElementSibling.classList.toggle('dropdown-active');
+
+        let dropDownIndicator = this.querySelector('.dropdown-indicator');
+        dropDownIndicator.classList.toggle('bi-chevron-up');
+        dropDownIndicator.classList.toggle('bi-chevron-down');
+      }
+    })
+  });
+
+  
\ No newline at end of file

src/Screens/blog.js

+/* eslint-disable jsx-a11y/iframe-has-title */
 import React from "react";
 import Footer from "../Components/Footer";
 import TopNav from "../Components/TopNav";

src/Screens/home.js

@@ -81,63 +81,62 @@ export default function Home() {
 
                 <section id="services-list" className="services-list">
                     <div className="container" data-aos="fade-up">
-
                         <div className="section-header">
                             <h2>Partners</h2>
                         </div>
-                        <div className="row gy-5">
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                        <div className="row gy-5 d-flex">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client1.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client2.jpg'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client3.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client4.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client5.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client6.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client7.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client8.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client9.jpg'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client10.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client11.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client12.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client13.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client14.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client15.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client16.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client17.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client18.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
                             {/* <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
@@ -146,28 +145,28 @@ export default function Home() {
                             {/* <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client20.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div> */}
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client21.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
                             {/* <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client22.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div> */}
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client23.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
                             {/* <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client24.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div> */}
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client25.jpg'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client26.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client27.png'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
-                            <div className="col-lg-2 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
+                            <div className="col-lg-2 col-md-6 service-item d-flex" style={{ justifyContent: 'center' }} data-aos="fade-up" data-aos-delay="100">
                                 <img src={'assets/img/partners/client28.jpg'} alt="Patners" style={{ width: '170px', height: '70px' }} />
                             </div>
                         </div>