CODEWITHSUNDEEP
jqueryhtmlcss
ziggy
ziggy

Reputation: 35

jQuery hamburger menu not appearing

I am having an issue with styling a hamburger menu and getting the hamburger menu to appear via jQuery.

Here is the jQuery I have so far:

$(document).ready(function(){

    $('.hamburger-box').on('click', function(){
        $('.navigation').toggleClass('burger-nav');
    });

});

It's a start, but I am not entirely sure how to proceed after this. I was not able to get anything to appear after I made the class visible. Pretty sure I am placing the class in the incorrect place and I did not consider the spacing appropriately.

I have a JSFiddle here with the code im working with: (Zoom into your browser till you see the hamburger menu)

https://jsfiddle.net/5vvtek5f/

Here's the hamburger menu that I was going to have appear when a click is made on the hamburger icon: https://jsfiddle.net/xnpa2n6w/

Any help will be greatly welcomed!

Upvotes: 0

Views: 75

Answers (1)

Someone
Someone

Reputation: 257

https://jsfiddle.net/5vvtek5f/1/

You had a display: none on your ul but you applied a class on the navigation.

@media (max-width: 414px){
    .navigation > ul{
        display: none;
    } 
}

So what i did was add this:

nav.navigation {
    display: inline-block;
}
nav.navigation.burger-nav {
    display: inline-block;
}

@media (max-width: 414px){
    nav.navigation {
        display: none;
    }
}

Which hides the navigation while the screen size is under 414px. And enables/disables it when the hamburger button is clicked.

Upvotes: 1

Related Questions