Menú button animated – the three bar turns to X

  • gerard57

    (@gerard57)


    7 years ago

    Hi! I was searching about if there’s the possibility to animate the menú button (the top right button that expands a new tab from the right). This when it’s open, the three bar icon turns to an X automatically. I want to apply an animation that changes the three bar to an X in a way you can see the bars moving. I found a website that explains this type of animations that I was looking for (https://www.sarasoueidan.com/blog/navicon-transformicons/), I tried to copy the CSS codes but there are a few mistakes that I don’t know why appears. Also, I doubt if I’m on the correct page to add this codes. Any idea how to solve it in my website case? Thanks.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi @gerard57, that menu toggle button is from the Genericons icon font, so the individual pieces can’t be animated to turn into the “X” without completely redesigning it with three individual bars. It would require creation of a Child Theme and then reworking the html and CSS. After that, you could do an animation. You would need to use the code they have as a guide and then use the correct CSS selectors.

Viewing 1 replies (of 1 total)
  • The topic ‘Menú button animated – the three bar turns to X’ is closed to new replies.