▼
Streaming live at 10am (PST)

Hamburger menu to X

Design help General
#1

For the life of me I don’t understand why they doesn’t offer a “hamburger to X” option on the navbar.
I’ve spent time tonight trying to build a transition on the menu icon. I’ve tried changing it in Pressed and/or focused states. no success whatsoever. ugh.

here’s the link to the site in messy progress:
http://scottbarbey70956011502405-c113dc3db0ebd.webflow.io/homepage-to-fix-nav

here’s a link to the test page… that isn’t working. :frowning:
http://scottbarbey70956011502405-c113dc3db0ebd.webflow.io/homepage-to-fix-nav

Is there any easy way to build a menu hamburger icon that switches to an “X” when the menu is opened…
that when re-clicked… closes said menu? Help please.

thanks.
SB

#2

Hi @scottbarbey I actually made a little tutorial on how to build animated hamburger menu button buttons: https://webflow.com/blog/how-to-customize-your-hamburger-menu-in-webflow

You’re also welcome to clone this project to play around with the hamburger menus or use one for your own site: http://custom-hamburger-menus.webflow.io/

There’s an interaction trigger in Webflow for Navbar Open and Close states which is very powerful for building custom nav interactions :smiley:

2 Likes
#3

Waldo- you are a king amongst men. Thank you greatly

3 Likes
#4

Waldo - any suggestions on how to scale the build if i want a smaller
“menu/X close” in mobile…?

#5

@scottbarbey thanks again for reaching out, I’m not sure I quite understand what you mean by scaling the menu button/close on mobile? Maybe try adjusting the scale of the button itself, or putting the hamburger lines into a parent div which you then scale inside of the button but only on mobile. Difficult to say without a Read-Only link to your site. Could you please share your Read-Only link and where you’re building the menu?

Thanks in advance! :slight_smile:

#6

think I worked thru my needs on this. thanks as always.
I have a hamburger that animates to an X and I couldn’t be happier.

thanks Waldo!

#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.