Kevin Powell - Community•8mo ago

Dude, Where is my nav?

Doing a iCodeThis project and for some odd reason I went with a desktop first design. Now when do the media queries, I thought they are coded correctly but for some reason my hamburger menu does not appear on small screens. This has been a real pain to figure out why it is not working, so I though I would ask in here. TIA https://github.com/andrewteece/growth-landing-page

GitHub

GitHub - andrewteece/growth-landing-page

Contribute to andrewteece/growth-landing-page development by creating an account on GitHub.

12 Replies

MarkBoots•8mo ago

- hamburger-button is display:none - mobile__nav is off the screen at the right Can not see a media query that shows the button and there is no js that adds the .active class when button is clicked

Andrew•8mo ago

The hamburger menu shows up at 649px through 669px. I have been running this in my head and in firebox dev tools.

Andrew•8mo ago

That's at 644px.

 // Mobile Menu
document.addEventListener('DOMContentLoaded', () => {
    const hamburgerButton = document.querySelector('.hamburger-button');
    const mobileMenu = document.querySelector('.mobile__nav');

    hamburgerButton.addEventListener('click', () =>
        mobileMenu.classList.toggle('active')
    );
});

 // Mobile Menu
document.addEventListener('DOMContentLoaded', () => {
    const hamburgerButton = document.querySelector('.hamburger-button');
    const mobileMenu = document.querySelector('.mobile__nav');

    hamburgerButton.addEventListener('click', () =>
        mobileMenu.classList.toggle('active')
    );
});

This problem is driving me nuts! Im sure its something so simple.

MarkBoots•8mo ago

make a github pages or codepen please, because i can not see your mobile menu script in the repo

Andrew•8mo ago

https://andrewteece.github.io/growth-landing-page/

MarkBoots•8mo ago

again. in your style.css there is no media query that show's the .hamburger-button (hidden by default. and in the main.js there is not nav script. did you push the latest changes?

mätthew•8mo ago

still having issues?

Andrew•8mo ago

I have this in the media query

@media (max-width: 41rem) {
    .nav .main__nav {
        display: none;
    }

     .nav .hamburger-button {
        display: block;
    }

@media (max-width: 41rem) {
    .nav .main__nav {
        display: none;
    }

     .nav .hamburger-button {
        display: block;
    }

This is the js for the mobile nav/menu

// Mobile Menu
document.addEventListener('DOMContentLoaded', () => {
    const hamburgerButton = document.querySelector('.hamburger-button');
    const mobileMenu = document.querySelector('.mobile__nav');

    hamburgerButton.addEventListener('click', () =>
        mobileMenu.classList.toggle('active')
    );
});

// Mobile Menu
document.addEventListener('DOMContentLoaded', () => {
    const hamburgerButton = document.querySelector('.hamburger-button');
    const mobileMenu = document.querySelector('.mobile__nav');

    hamburgerButton.addEventListener('click', () =>
        mobileMenu.classList.toggle('active')
    );
});

The hamburger menu displays at 642px through 656px Have you been able to see what I mean?

vince•8mo ago

Is this what you're talking about?

vince•8mo ago

If you remove that media query it works perfectly from what it seems

Andrew•8mo ago

Geez! I knew it had to be something like that. Thank you

Gaming

Programming

Dude, Where is my nav?