Home › Forums › Support › Hamburger icon customisation and animation This topic has 7 replies, 2 voices, and was last updated 4 years, 6 months ago by Tom. Viewing 8 posts - 1 through 8 (of 8 total) Author Posts September 16, 2019 at 3:35 pm #1011073 JBD Hi Could you help me to create customised hamburger menu, with middle line offset to the right by a eg – – – Also, is there a way to create “nolink” menu items (apart from custom # link and unclickable class .unclickable > a:hover { cursor: default; } Finally, is there a way to animate the off canvas drop down menu? (when sub menus expand and collapse?) Thanks September 17, 2019 at 10:19 am #1011821 TomLead Developer Lead Developer Hi there, Animated hamburgers are hard to achieve, but this topic should get you started: https://generatepress.com/forums/topic/spinning-hamburger/#post-976278 Once you have that working, we should be able to adjust the lines to achieve what you’re after. Let’s work on one thing at a time – once we complete the first thing, we’ll move onto the next questions. Let me know 🙂 September 23, 2019 at 3:27 am #1016447 JBD Thanks, Its not the hamburger icon I need to animate (but the code is useful so thanks), it was the actual off canvas menu I want to animate, eg when a menu item is expanded in the off canvas menu. September 23, 2019 at 10:10 am #1016918 TomLead Developer Lead Developer Do you have any examples of the animation you’re wanting to achieve? September 23, 2019 at 12:35 pm #1017028 JBD I guess something like this. But with option to work with sub menus. September 23, 2019 at 4:21 pm #1017152 TomLead Developer Lead Developer Is that a page I can take a look at? It would help to see the CSS they’re using. September 23, 2019 at 5:02 pm #1017163 JBD I think these are interesting options https://codepen.io/danbhala/pen/EKoNrO https://codepen.io/danbhala/pen/EKoNrO September 24, 2019 at 9:23 am #1017814 TomLead Developer Lead Developer Give this a shot: .slideout-menu { transform: translateY(-100px); opacity: 0; transition: transform 400ms ease-in-out, opacity 500ms ease-in-out; } .slide-opened .slideout-menu { transform: translateY(0); opacity: 1; } Author Posts Viewing 8 posts - 1 through 8 (of 8 total) You must be logged in to reply to this topic. Log In Username: Password: Keep me signed in Log In