Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Burger button doesn't seem to work at all

byMR
April 26, 2023

I have a burger menu when the screen is small enough however it doesn’t react like a button at all, more like an image. I have compared it to other snippets of code and other solutions found on here but I can’t find a solution. I have added the code I have currently. I have provided the HTML (the first section), css (the second section) and Javascript (the third section)

<!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/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>


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

<body>
    

    <header class="header">
        <a href="#" class="logo">projects</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="#education">Education</a>
            <a href="#projects">projects</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="#"><i class='bx bxl-linkedin-square'></i></a>
                <a href="#"><i class='bx bxl-github' ></i></a>
            </div>
            <a href="#" 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="#" class="btn">Read More</a>
        </div>
    </section>

    <!-- ----EDUCATION SECTION---- -->
    <section class="education" id="education">
        <h2 class="heading">My <span>Education</span></h2>

        <div class="education-container">
            <div class="education-box">
                <i class='bx bx-water' ></i>
                <h3>Systems Engineer</h3>
                <p>Providing support for a 24/7 control room that monitors water dams and wind farms to generate electricity</p>
                <a href="#" class="btn">Read More</a>
            </div>
            <div class="education-box">
                <i class='bx bx-desktop'></i>
                <h3>Hardware Tester/Agency Worker</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="education-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>Project</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>

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

        <form action="#">
            <div class="input-box">
                <input type="text" placeholder="Full Name">
                <input class="email" placeholder="Email Address">
            </div>
            <div class="input-box">
                <input type="number" placeholder="Mobile Number">
                <input type="text" placeholder="Email Subject">
            </div>
            <textarea name="" id="" cols="30" rows="10" 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/typed.js@2.0.15/dist/typed.umd.js"></script>

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


</html>

@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: ver(--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;
}

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

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

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

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

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

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

.education-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;
    }
    .education {
        padding-bottom: 7rem;
    }
    .education {
        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;
    }
    .education h2 {
        margin-bottom: 3rem;
    }
    .education h2 {
        margin-bottom: 3rem;
    }
    .education-container {
        grid-template-columns: repeat(2, 1f);
    }
}

@media (max-width: 617px){
    .education-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;
    }
    .footer {
        flex-direction: column-reverse;
    }
    .footer p {
        text-align: center;
        margin-top: 2rem;
    }
}

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

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Because you defined it in small letter and you’re calling it with capital letter

Wrong:

let menuIcon ... MenuIcon.onclick

Correct:

let MenuIcon ... MenuIcon.onclick
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading