Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to make expanded menu shrink back to hamburger icon?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #273918
    HorrieGrump
    Participant

    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,

    #273984
    chris_2080
    Participant

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

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

    #274227
    HorrieGrump
    Participant

    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

    #274238
    chris_2080
    Participant

    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

    #274239
    chiresthet
    Participant
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.