live website does not look like local host website, navbar not showing up on mobile

Question

My live website https://synergyofsupportcounseling.com/ does not look like my local host website.The Hamburger Menu and navbar doesn't show up on live website but it does show up on local host. I have my repository on GitHub here https://github.com/apin1992/AllenDavis It is being hosted on Netlify. I have tried different browsers like Chrome, Firefox, Opera, Edge and still get the same result with no navbar on mobile for the live site. Also turned off all extensions with no success.

/* ========== toggle icon navbar ==========*/

let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menuIcon.onclick = () => {
  menuIcon.classList.toggle('bx-x');
  navbar.classList.toggle('active');
};

/* ========== scroll sections active link ==========*/

let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');

window.onscroll = () => {
  sections.forEach((sec) => {
    let top = window.scrollY;
    let offset = sec.offsetTop - 150;
    let height = sec.offsetHeight;
    let id = sec.getAttribute('id');

    if (top >= offset && top < offset + height) {
      navLinks.forEach((links) => {
        links.classList.remove('active');
        document
          .querySelector('header nav a[href*=' + id + ']')
          .classList.add('active');
      });
    }
  });

  /* ========== sticky navbar ==========*/

  let header = document.querySelector('header');

  header.classList.toggle('sticky', window.scrollY > 100);

  /* ========== remove toggle icon and navbar when click navbar link (scroll) ==========*/

  menuIcon.classList.remove('bx-x');
  navbar.classList.remove('active');
};

  


/* ========== typed js  ==========*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  scroll-behavior: smooth;
  font-family: 'Poppins', sans-serif;
}

:root {
  --bg-color: #000;
  --second-bg-color: #cccccc;
  --text-color: #fff;
  --main-color: #1da1f2;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

section {
  min-height: 100vh;
  padding: 10rem 9% 2rem;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 9%;
  background: var(--bg-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.header.sticky {
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.2);
}

.logo {
  font-size: 2.5rem;
  color: var(--text-color);
  font-weight: 600;
  cursor: default;
  

}
.logo img{
  width: 10rem;}
  .title-span {
    font-size: 3rem;
   
  }

.navbar a {
  font-size: 1.7rem;
  color: var(--text-color);
  margin-left: 4rem;
  transition: 0.3s;
}

.navbar a:hover,
.navbar a.active {
  color: var(--main-color);
}

#menu-icon {
  font-size: 3.6rem;
  color: var(--text-color);
  display: none;
}

.home {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-img {
  /* width: 35vw; */
  filter: drop-shadow(-1px 10px 5px var(--main-color));
  animation: floatImage 4s ease-in-out infinite;
}

.hexagon {
  position: relative;
  width: 20vw;
  height: 55vh;
  margin: 0 auto;
  background-color: var(--main-color);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 88%, 0% 75%, 0% 25%);
}

.hexagon img {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  right: .5vh;
}

@keyframes floatImage {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2.4rem);
  }

  100% {
    transform: translateY(0);
  }
}

.home-content h3 {
  font-size: 3.2rem;
  font-weight: 700;
}

.home-content h3:nth-of-type(2) {
  margin-bottom: 2rem;
}

span {
  color: var(--main-color);
}

.home-content h1 {
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.home-content p {
  font-size: 1.6rem;
}

.social-media a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background: transparent;
  border: 0.2rem solid var(--main-color);
  border-radius: 50%;
  font-size: 2rem;
  color: var(--main-color);
  margin: 3rem 1.5rem 3rem 0;
  transition: 0.5s ease;
}

.social-media a:hover {
  background: var(--main-color);
  color: var(--second-bg-color);
  box-shadow: 0 0 1rem var(--main-color);
} /*
#linked-in {
  color: var(--second-bg-color) !important;

} 
test number one 
#linked-in:hover {
  color: var(--second-bg-color) !important;
} */

.btn {
  display: inline-block;
  padding: 1rem 2.8rem;
  background: var(--main-color);
  border-radius: 4rem;
  box-shadow: 0 0 1rem var(--main-color);
  font-size: 1.6rem;
  color: black;
  letter-spacing: 0.1rem;
  font-weight: 600;
  transition: 0.5s ease;
}

.btn:hover {
  box-shadow: none;
}

.about {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  background: darkblue;

}

.about-img img {
  width: 20vw;
}
.about-me-me {
  color: #000;
}
.about-me-btn {
  display: inline-block;
  padding: 1rem 2.8rem;
  background: var(--second-bg-color);
  border-radius: 4rem;
  box-shadow: 0 0 1rem var(--main-color);
  font-size: 1.6rem;
  color: #000;
  letter-spacing: 0.1rem;
  font-weight: 600;
  transition: 0.5s ease;
}

.heading {
  text-align: center;
  font-size: 4.5rem;
  color: #fff;
}

.about-content h2 {
  text-align: left;
  line-height: 1.2;
}

.about-content h3 {
  font-size: 2.6rem;
}

.about-content p {
  font-size: 1.6rem;
  margin: 2rem 0 3rem;
}
.services {
  color: black;
}

.services h2 {
  margin-bottom: 5rem;
}

.services-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.services-container .service-box {
  flex: 1 1 30rem;
  background: var(--main-color);
  padding: 3rem 2rem 4rem;
  border-radius: 2rem;
  text-align: center;
  border: 0.2rem solid var(--bg-color);
  transition: 0.5s ease;
  border: 3px silver solid;
}

.services-container .service-box:hover {
  border-color: var(--main-color);
  transform: scale(1.02);
  border: 3px silver solid;
}

.service-box i {
  font-size: 7rem;
  color: var(--main-color);
}

.service-box h3 {
  font-size: 2.6rem;
}

.service-box p {
  font-size: 1.6rem;
  margin: 1rem 0 3rem;
}

.portfolio {
  background: var(--main-color);
}

.portfolio h2 {
  margin-bottom: 4rem;
}

.portfolio-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 2.5rem;
}

.portfolio-container .portfolio-box {
  position: relative;
  border-radius: 2rem;
  box-shadow: 0 0 1rem var(--bg-color);
  overflow: hidden;
  display: flex;
}

.portfolio-box img {
  width: 100%;
  transition: 0.5s ease;
}

.portfolio-box:hover img {
  transform: scale(1.1);
}

.portfolio-box .portfolio-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(251, 249, 249, 0.706), var(--text-color));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 4rem;
  transform: translateY(120%);
  transition: 0.5s ease;
  color: var(--bg-color);
}

.portfolio-box:hover .portfolio-layer {
  transform: translateY(0);
}

.portfolio-layer h4 {
  font-size: 2rem;
}

.portfolio-layer p {
  font-size: 1.6rem;
  margin: 0.3rem 0 1rem;
}

.portfolio-layer a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  background: var(--text-color);
  border-radius: 50%;
}

.portfolio-layer a i {
  font-size: 2rem;
  color: var(--second-bg-color);
}
.contact {
  color: var(--main-color);
}

.contact h2 {
  margin-bottom: 3rem;
}

.contact-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: var(--main-color);

  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  color: #333;
}

.contact-info {
  margin-top: 20px;
  font-size: 4vh;
  color: var(--main-color);
}

.contact-info p {
  margin: 10px 0;
}
.contact-info a {
  margin: 10px 0;
  color: var(--main-color);
  text-decoration: underline;
}
/* Media Queries for Responsive Design */
@media only screen and (max-width: 600px) {
  .contact-container {
    padding: 15px;
  }#menu-icon {
  display: block;
 }
}

.contact form {
  max-width: 70rem;
  margin: 1rem auto;
  text-align: center;
  margin-bottom: 3rem;
}

.contact form .input-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contact form .input-box input,
.contact form textarea {
  width: 100%;
  padding: 1.5rem;
  font-size: 1.6rem;
  color: black;
  background: var(--second-bg-color);
  border-radius: 0.8rem;
  margin: 0.7rem 0;
}

.contact form .input-box input {
  width: 49%;
}

.contact form textarea {
  resize: none;
}

.contact form .btn {
  margin-top: 2rem;
  cursor: pointer;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem 9%;
  background: var(--second-bg-color);
  color: #000;
}

.footer-text p {
  font-size: 1.6rem;
}

.footer-iconTop a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  background: var(--main-color);
  border-radius: 0.8rem;
  transition: 0.5s ease;
}

.footer-iconTop a:hover {
  box-shadow: 0 0 1rem var(--main-color);
}

.footer-iconTop a i {
  font-size: 2.4rem;
  color: var(--second-bg-color);
}

/* Breakpoints */

@media (max-width: 1200px) {
  html {
    font-size: 55%;
  }
}

@media (max-width: 991px) {
  .header {
    padding: 2rem 3%;
  }

  section {
    padding: 10rem 3% 2rem;
  }

  .services {
    padding-bottom: 7rem;
  }

  .portfolio {
    padding-bottom: 7rem;
  }

  .contact {
    min-height: auto;
  }

  .footer {
    padding: 2rem 3%;
  }
}

@media (max-width: 768px) {
  #menu-icon {
    display: block;
  }

  .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 1rem 3%;
    background: var(--bg-color);
    border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    display: none;
  }

  .navbar.active {
    display: block;
  }

  .navbar a {
    display: block;
    font-size: 2rem;
    margin: 3rem 0;
  }

  .home {
    flex-direction: column;
  }

  .home-content h3 {
    font-size: 2.6rem;
  }

  .home-content h1 {
    font-size: 5rem;
  }

  .home-img img {
    width: 70vw;
    margin-top: 4rem;
  }

  .home-img {
    /* width: 35vw; */
    filter: drop-shadow(-1px 10px 5px var(--main-color));
    animation: floatImage 4s ease-in-out infinite;
  }

  .hexagon {
    position: relative;
    width: 30vw;
    height: 50vh;
    margin: 0 auto;
    background-color: var(--main-color);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  .hexagon img {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-left: 2vh;
  }

  .about {
    flex-direction: column-reverse;
  }

  .about img {
    width: 50vw;
    margin-top: 4rem;
  }

  .services h2 {
    margin-bottom: 3rem;
  }

  .portfolio h2 {
    margin-bottom: 3rem;
  }

  .portfolio-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 617px) {
  .portfolio-container {
    grid-template-columns: 1fr;
  }
  .home-img {
    /* width: 35vw; */
    filter: drop-shadow(-1px 10px 5px var(--main-color));
    animation: floatImage 4s ease-in-out infinite;
  }

  .hexagon {
    position: relative;
    width: 45vw;
    height: 50vh;
    margin: 0 auto;
    background-color: var(--main-color);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  .hexagon img {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 450px) {
  
  html {
    font-size: 50%;
  }
  .hexagon {
    position: relative;
    width: 45vw;
    height: 30vh;
    margin: 0 auto;
    background-color: var(--main-color);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  .btn {
    margin-bottom: 3vh;
  }

  .contact form .input-box input {
    width: 100%;
  }
  .about-img {
    width: 100%;
  }
}

@media (max-width: 365px) {
 .navbar {
  display: block;
 }
 #menu-icon {
  display: block;
 }
  .home-img img {
    width: 90vw;
  }

  .about-img img {
    width: 90vw;
  }

  .footer {
    flex-direction: column-reverse;
  }

  .footer p {
    text-align: center;
    margin-top: 2rem;
  }
  .hexagon {
    position: relative;
    width: 45vw;
    height: 30vh;
    margin: 0 auto;
    background-color: var(--main-color);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  .hexagon img {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .btn {
    margin-bottom: 3vh;
  }
}

<!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" />

    <meta name="description" content="Discover transformative counseling and online mentorship at Synergy of Support. Our experienced professionals provide personalized guidance for mental well-being and personal growth. Embrace positive change with our compassionate support. Start your journey today"/>

    <meta name="robots" content="index, follow">

    <link rel="canonical" href="https://www.synergyofsupportcounseling.com">


    <title>Synergy</title>
    <link rel="shortcut icon" href="images/title.png" type="image/x-png" />

    <!-- box icons -->
    <link
      href="http://unpkg.com/[email protected]/css/boxicons.min.css"
      rel="stylesheet"
    />

    <!-- custom css -->
    <link rel="stylesheet" href="css/style.css" />
    <script
      src="//code.tidio.co/reyrowfzsuoklospbgfrbjgkilqag2fp.js"
      async
    ></script>


    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>





<script type="text/javascript">
   (function(){
      emailjs.init("YHz_vnvqjl-VXXewB");
   })();
</script>
<script src="js/email.js"></script>

  </head>

  <!-- <script>
    //create CSV file data in an array  
    var csvFileData = [
        ['Alan Walker', 'Singer'],
        ['Cristiano Ronaldo', 'Footballer'],
        ['Saina Nehwal', 'Badminton Player'],
        ['Arijit Singh', 'Singer'],
        ['Terence Lewis', 'Dancer']
    ];

    //create a user-defined function to download CSV file   
    function download_csv_file() {

        //define the heading for each row of the data  
        var csv = 'Name,Profession\n';

        //merge the data with CSV  
        csvFileData.forEach(function (row) {
            csv += row.join(',');
            csv += "\n";
        });

        //display the created CSV data on the web browser   
        document.write(csv);


        var hiddenElement = document.createElement('a');
        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
        hiddenElement.target = '_blank';

        //provide the name for the CSV file to be downloaded  
        hiddenElement.download = 'Famous Personalities.csv';
        hiddenElement.click();
    }  
</script> -->

  <body>
    <header class="header">
      <a href="#" class="logo">
        <img class="logo-img" src="images/blackstar2.png" alt=""></a>
        <h1><span class="title-span">Synergy</span><p>of Support Counseling LLC</p> </h1>
        
      

      <i class="bx bx-menu" id="menu-icon"></i>

      <nav class="navbar">
        <a href="#home" class="active">Home</a>
        <a href="#about">About</a>
        <a href="#services">Experience</a>
        <a href="#portfolio">Achievements</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>

    <!-- home section design-->
    <section class="home" id="home">
      <div class="home-content">
        <h3>Hello, I'm</h3>
        <h1>Mr. Allen Davis</h1>
        <h3>And I'm a <span class="multiple-text"></span></h3>
        <p>
          I am dedicated, compassionate and comitted to supporting you on your
          journey towards mental and emotional well-being. My therapeutic
          aporoach is tailored to meet your unique needs. I am here to help you,
          let's work together to foster personal growth resilience and a ddeeper
          understanding of youself.I look forward to accompanying you on your
          path to a healthier, happier life.
        </p> <br><br>
        <!-- <div class="social-media">
          <a href="http://www.facebook.com" target="_blank"><i class="bx bxl-facebook"></i></a>
                <a href="http://www.twitter.com" target="_blank"><i class="bx bxl-twitter"></i></a>
                <a href="http://www.instagram.com" target="_blank"><i class="bx bxl-instagram-alt"></i></a>
          <a
            id="linked-in"
            href="http://www.linkedin.com/in/allen-davis-300200333"
            target="_blank"
            ><i class="bx bxl-linkedin"></i
          ></a>
        </div> -->
        <a href="#contact" class="btn">Take the first step</a>
      </div>

      <div class="home-img">
        <div class="hexagon">
          <img
            src="images/profileNoBg.png"
            alt="Allen Davis Profile Picture"
            
          />
        </div>
      </div>
    </section>
   
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

    <!-- custom js -->
    <script src="js/script.js"></script>
  </body>
</html>