Search code examples
javascripthtmlcsshamburger-menu

Burger menu works on home screen but not separate about page

I initially had an issue with the burger menu before but was a simple spelling mistake that I didn't spot. however, this time seems more complicated. I am now making separate pages for the section of my website such as About Me, Education, etc. I have only started with the About Me page. The burger menu works on the Home page but not the About page. I have each file inside its own folder to keep it tidy.

/* ----SCROLL SECTION 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');
};

/* ----SCROLL REVEAL---- */
ScrollReveal({
  reset: true,
  distance: '80px',
  duration: 2000,
  delay: 200
});

ScrollReveal().reveal('.home-content, .heading', {
  origin: 'top'
});
ScrollReveal().reveal('.home-img, .experience, .container, .portfolio-box, .contact form', {
  origin: 'bottom'
});
ScrollReveal().reveal('.home-content h1, .about-img', {
  origin: 'left'
});
ScrollReveal().reveal('.home-content p, .about-content', {
  origin: 'right'
});

/* ----TYPED JS---- */
const typed = new Typed('.multiple-text', {
  strings: ['Systems Engineer', 'IT Enthusiast'],
  typeSpeed: 100,
  backSpeed: 100,
  backDelay: 1000,
  loop: true
});

/* ----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');
};

@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: #1f242d;
  --second-bg-color: #323946;
  --text-color: #fff;
  --main-color: #ff004f;
}

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

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

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

.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: .1rem solid rgba(0, 0, 0, .2);
}

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

.navbar a {
  font-size: 1.7rem;
  color: var(--text-color);
  margin-left: 4rem;
  transition: .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 img {
  width: 35vw;
  animation: floatImage 4s ease-in-out infinite;
}

@keyframes floatImage {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.4);
  }
  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: .2rem solid var(--main-color);
  border-radius: 50%;
  font-size: 2rem;
  color: var(--main-color);
  margin: 3rem 1.5rem 3rem 0;
  transition: .5s ease;
}

.social-media a:hover {
  background: var(--main-color);
  color: var(--second-bg-color);
  box-shadow: 0 0 1rem var(--main-color);
}

.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: var(--second-bg-color);
  letter-spacing: .1rem;
  font-weight: 600;
  transition: .5s ease;
}

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

.about {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  background: var(--second-bg-color);
}

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

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

.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;
}

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

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

.experience-container .experience-box {
  flex: 1 1 30rem;
  background: var(--second-bg-color);
  padding: 3rem 2rem 4rem;
  border-radius: 2rem;
  text-align: center;
  border: .2rem solid var(--bg-color);
  transition: .5s ease;
}

.experience-container,
.experience-box:hover {
  border-color: var(--main-color);
  transform: scale(1.02);
}

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

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

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

.projects {
  background: var(--second-bg-color);
}

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

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

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

.projects-box img {
  width: 100%;
  transition: .5s ease;
}

.projects-box:hover img {
  transform: scale(.8);
}

.projects-box .projects-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, .2), var(--main-color));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 4rem;
  transform: translateY(100%);
  transition: .5s ease;
}

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

.projects-layer h4 {
  font-size: 3rem;
}

.projects-layer p {
  font-size: 1.6rem;
  margin: .3rem 0 1rem;
}

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

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

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

.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: var(--text-color);
  background: var(--second-bg-color);
  border-radius: .8rem;
  margin: .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);
}

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

.footer-iconTop a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .8rem;
  background: var(--main-color);
  border-radius: .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;
  }
  .experience {
    padding-bottom: 7rem;
  }
  .projects {
    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: .1rem solid rgba(0, 0, 0, .2);
    box-shadow: 0 .5rem 1rem rgba(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;
  }
  .about {
    flex-direction: column-reverse;
  }
  .about-img {
    width: 70vw;
    margin-top: 4rem;
  }
  .detail {
    flex-direction: column-reverse;
  }
  .detail-img {
    width: 70vw;
  }
  .experience h2 {
    margin-bottom: 3rem;
  }
  .experience h2 {
    margin-bottom: 3rem;
  }
  .experience-container {
    grid-template-columns: repeat(2, 1f);
  }
}

@media (max-width: 617px) {
  .experience-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width:450px) {
  html {
    font-size: 50%;
  }
  .contact form .input-box input {
    width: 100%;
  }
}

@media (max-width: 365px) {
  .home-img img {
    width: 90vw;
  }
  .about-img img {
    width: 90vw;
  }
  .detail-img img {
    width: 90vw;
  }
  .footer {
    flex-direction: column-reverse;
  }
  .footer p {
    text-align: center;
    margin-top: 2rem;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charsets="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal projects Website | Chris McClure</title>

  <!-- ----BOX ICONS---- -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>


  <!-- ----CUSTOM CSS---- -->
  <link rel="stylesheet" href="../css/style.css">
</head>

<body>
  <header class="header">
    <a href="#" class="logo">Chris</a>

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

    <nav class="navbar">
      <a href="#home" class="active">Home</a>
      <a href="#about">About Me</a>
      <a href="#experience">Experience</a>
      <a href="#projects">Projects</a>
      <a href="#education">Education</a>
      <a href="#skills">Skills</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <!-- ----HOME SECTION DESIGN---- -->
  <section class="home" id="home">
    <div class="home-content">
      <h3>Hello, It's Me</h3>
      <h1>Chris McClure</h1>
      <h3>And I'm a <span class="multiple-text"></span></h3>
      <p>I have had a wide range of experiences. I am also drawn to learning about new innovative tech</p>
      <div class="social-media">
        <a href="https://www.linkedin.com/in/-christopher-mcclure/" target="_blank"><i class='bx bxl-linkedin-square'></i></a>
        <a href="https://github.com/chrismc0723" target="_blank"><i class='bx bxl-github' ></i></a>
      </div>
      <a href="../images/Christopher McClure - CV 04012023 (1).docx" class="btn">Download CV</a>
    </div>

    <div class="home-img">
      <img src="../images/Logo-face.jpg" alt="">
    </div>
  </section>

  <!-- ---- ABOUT SECTION---- -->
  <section class="about" id="about">
    <div class="about-img">
      <img src="../images/Me.jpg" alt="">
    </div>

    <div class="about-content">
      <h2 class="heading">About <span>Me</span></h2>
      <h3>Systems Engineer/Software Testing/Security Analyst/IT Enthusiast</h3>
      <p>I am the type of person always looking to learn something new, improve my own skills and expand them.</p>
      <a href="../about/about.html" class="btn">Read More</a>
    </div>
  </section>

  <!-- ----EXPERIENCE SECTION---- -->
  <section class="experience" id="experience">
    <h2 class="heading">My <span>experience</span></h2>

    <div class="experience-container">
      <div class="experience-box">
        <i class='bx bx-water'></i>
        <h3>Systems Engineer</h3>
        <p>Providing support for a 24/7 control room, I make sure all software and hardware is fully operational and providing solutions.</p>
        <a href="#" class="btn">Read More</a>
      </div>
      <div class="experience-box">
        <i class='bx bx-desktop'></i>
        <h3>Hardware Tester</h3>
        <p>testing the functionality and integrity of a variety of tech from TV's, phones, laptops, PC's and much more for an auction house.</p>
        <a href="#" class="btn">Read More</a>
      </div>
      <div class="experience-box">
        <i class='bx bxs-pizza'></i>
        <h3>Delivery Driver</h3>
        <p>Delivering pizza was the main part of the role while also supporting those in the shop with packaging food and cleaning the shop.</p>
        <a href="#" class="btn">Read More</a>
      </div>
    </div>
  </section>

  <!-- ----PROJECTS SECTION---- -->
  <section class="projects" id="projects">
    <h2 class="heading">Latest <span>Projects</span></h2>

    <div class="projects-container">
      <div class="projects-box">
        <img src="../images/Webscraper-git.png" alt="">
        <div class="projects-layer">
          <h4>Python Web Scraper</h4>
          <p>program to scrape data from the Marvel website</p>
          <a href="#"><i class='bx bxl-python' ></i></a>
        </div>
      </div>

      <div class="projects-box">
        <img src="../images/marvel-website.png" alt="">
        <div class="projects-layer">
          <h4>WIX Website Design</h4>
          <p>MARVEL Fan Website</p>
          <a href=""><i class='bx bxl-python' ></i></a>
        </div>
      </div>

      <div class="projects-box">
        <img src="../images/first-website.png" alt="">
        <div class="projects-layer">
          <h4>First HTML Website</h4>
          <p>First HTML Website built at University</p>
          <a href=""><i class='bx bxl-python' ></i></a>
        </div>
      </div>
    </div>
  </section>



  <!-- ----EDUCATION SECTION---- -->




  <!-- ----SKILLS SECTION---- -->






  <!-- ----CONTACT SECTION---- -->
  <section class="contact" id="contact">
    <h2 class="heading">Contact <span>Me!</span></h2>

    <form name="submit-to-google-sheet">
      <div class="input-box">
        <input type="text" name="Name" placeholder="Full Name">
        <input type="email" name="Email" placeholder="Email Address">
      </div>
      <div class="input-box">
        <input type="number" name="Number" placeholder="Mobile Number">
        <input type="text" name="Subject" placeholder="Email Subject">
      </div>
      <textarea name="Message" rows="6" placeholder="Your Message"></textarea>
      <input type="submit" value="Send Message" class="btn">
    </form>
  </section>


  <!-- ----FOOTER SECTION---- -->
  <footer class="footer">
    <div class="footer-text">
      <p>Copyright &copy; 2023 by Chris | All Rights Reserved.</p>
    </div>

    <div class="footer-iconTop">
      <a href="#home"><i class='bx bx-up-arrow-alt'></i></a>
    </div>
  </footer>

  <!-- ----SCROLL REVEAL---- -->
  <script src="https://unpkg.com/scrollreveal"></script>

  <!-- ----TYPED JS---- -->
  <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>


  <!-- ----CONTACT FORM---- -->
  <script>
    const scriptURL = 'https://script.google.com/macros/s/AKfycby_Q1_zROhzppKzH2-uQnM9a96wT75Nwxw2qk7u6Z5FvNrKcGd0H4Ndl8qK1fxK1l2RYA/exec'
    const form = document.forms['submit-to-google-sheet']

    form.addEventListener('submit', e => {
      e.preventDefault()
      fetch(scriptURL, {
          method: 'POST',
          body: new FormData(form)
        })
        .then(response => console.log('Success!', response))
        .catch(error => console.error('Error!', error.message))
    })
  </script>

  <script src="../js/main.js"></script>
</body>


</html>

ABOUT ME PAGE 

<!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">
        <title>About Me</title>

        <!-- ----BOX ICONS---- -->
        <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>


        <!-- ----CUSTOM CSS---- -->
        <link rel="stylesheet" href="../css/style.css">

    </head>
    <body>
        <header class="header">
            <a href="#" class="logo">Chris</a>
    
            <i class='bx bx-menu' id="menu-icon"></i>
    
            <nav class="navbar">
                <a href="../html/index.html">Home</a>
                <a href="#about" class="active">About</a>
                <a href="#experience">Experience</a>
                <a href="#projects">Projects</a>
                <a href="#education">Education</a>
                <a href="#skills">Skills</a>
                <a href="#contact">Contact</a>
            </nav>
        </header>

        <!-- ---- ABOUT SECTION---- -->
        <section class="about" id="about">
            <div class="about-img">
                <img src="../images/Me.jpg" alt="">
            </div>

            <div class="about-content">
                <h2 class="heading">About <span>Me</span></h2>
                <h3>Systems Engineer/Software Testing/Security Analyst/IT Enthusiast</h3>
                <p>I am a 23 year old Tech enthusiast that is constantly trying to learn more. 
                    From gaining an understanding to how things work to building something myself from the ground up.</p>
            </div>
        </section>

        <section class="about" id="about">
            <div class="about-img">
                <img src="../images/Setup.jpg" alt="">
            </div>

            <div class="about-content">
                <h2 class="heading">Work Bench</h2>
                <p>This is where the magic happens. All the research, the projects, the hours spent improving my knowledge and skills.</p>
                <p>This layout will be changing very soon to be more efficient for upcoming projects. These might also be streamed on Twitch.</p>
            </div>
        </section>


        <!-- ----FOOTER SECTION---- -->
        <footer class="footer">
            <div class="footer-text">
                <p>Copyright &copy; 2023 by Chris | All Rights Reserved.</p>
            </div>

            <div class="footer-iconTop">
                <a href="#about"><i class='bx bx-up-arrow-alt'></i></a>
            </div>
        </footer>

        <!-- ----SCROLL REVEAL---- -->
        <script src="https://unpkg.com/scrollreveal"></script>

        <!-- ----TYPED JS---- -->
        <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>



        <script src="../js/main.js"></script>

    </body>
</html>

Solution

  • So i've tried to recreate the issue you mentioned and i got the following error message regarding the menuIcon element:

    Uncaught ReferenceError: Cannot access 'menuIcon' before initialization at window.onscroll (main.js:25:3)

    This error message indicates that there is an attempt to access the variable menuIcon before it has been initialized. In the code provided, menuIcon is initialized using document.querySelector('#menu-icon'); which searches for an element in the HTML document with the ID of "menu-icon" and assigns it to the menuIcon variable. However, the code that is triggering the error is located in the window.onscroll function, which runs whenever the user scrolls the page. It attempts to toggle the bx-x class on menuIcon when the user clicks on it. Since the menuIcon variable has not yet been initialized when the window.onscroll function runs, the error above is thrown.

    To fix the error, you should move the initialization of the menuIcon variable to the top of the JavaScript file, before the window.onscroll function. This way, the variable will be available for use throughout the file.

    /* ----SCROLL SECTION ACTIVE LINK---- */
...
/* ----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');
};
window.onscroll = () => {
 ...
};