Responsive (hamburger) menu

[Gandalf]

Okay, I’ve been struggling with this for long enough. I need help, please!

I’m trying to create a simple-enough responsive menu that contracts to a hamburger at about 480px which will toggle the menu between display and hide. I have adapted a JS script that @paulob provided for another project and I have made some progress, but my brain is refusing to help.

The mobile version works fine, I think, but on the desktop version neither the hamburger button nor the menu display. What I want is on the desktop version for the menu to display but no hamburger, and on the mobile version for the hamburger to display. Pretty standard I think.

Perhaps I’m off on one and there’s a better way of achieving this. I know I need to improve the burger itself

I have the following codepen http://codepen.io/gandalf458/pen/QydqNr

[m3g4p0p]

@Gandalf

on the desktop version neither the hamburger button nor the menu display

The “Menu” text and the burger are both within the #hamburger element which you’re hiding in the media query. Just separate these like

<div id="showHide">
    <span id="menu">Menu</span>
    <span id="hamburger">&equiv;</span>
</div>

and

#menu {
    display: block;
}

#hamburger {
    display: none;
}

@media only screen and (max-width: 480px) {
    #menu {
        display: none;
    }

    #hamburger {
        display: block;
    }
}

[SamA74]

For a simple one level menu like this I don’t even bother with js and do it all in css.

[Gandalf]

@m3g4p0p and @SamA74 Many thanks. I’ll look at these when my brain returns!