How to make expanded menu shrink back to hamburger icon?

[HorrieGrump]

Hi, I’m trying to create a variation on this hamburger menu – https://codepen.io/RoachMech/pen/QpNWLm – but the problem is that if I create a link to another part of the same page, the menu doesn’t disappear and revert back to the neat little hamburger icon – it just stays at the top of the page as a big, fat, ugly expanded menu.

But if I create a link to another page, it disappears without any problem!

Does anyone know how to make the expanded menu shrink back to a neat little hamburger icon when linking to another destination on the same page? Ideally without Javascript, but if Javascript is necessary, can you make it something I can just paste in without having to know Javascript?

Thanks,

[chris_2080]

i don’t know how to do this with css, but with js(jquery) you can try

https://codepen.io/chris3000/pen/BPNjPR

[HorrieGrump]

Thanks, Chris, for this suggestion, and sorry for the delay in getting back to you.

I don’t yet know how to use javascript, but I tried pasting your javascript code into the element in the HTML of the site I’m using this on (I also put it between tags) but it didn’t seem to work on the site, which is http://www.sxo.bkw.mybluehost.me.

Is that what I was supposed to be doing? Or if not, is there a quick fix?

Thanks,

Horrie

[chris_2080]

Linking jQuery in html, and put the js code in a js file and link this
example in html section head-tag
https://codepen.io/chris3000/pen/BPNjPR

hope it helps

[chiresthet]

Thanks

http://www.saouma-chirurgie-esthetique.com/

[Author]

Posts