Streaming live at 10am (PST)

Amending cloned hamburger interaction

#1

https://preview.webflow.com/preview/footprintentertainment?utm_source=footprintentertainment&preview=26c8bcb50f0d0d4186784cb78d302297

Hi,

I have cloned a hamburger interaction from @waldo (thanks!). https://footprintentertainment.webflow.io/ However, I’d like the menu that drops down to be in line with the hamburger. At the moment it ends underneath it. Can’t seem to figure out why it’s moving down so far.

I’d also like to make the lines in the hamburger a little smaller. I change the widths of each of them from 35px down to 25px but for some reason it only works with the top and bottom line but the centre one remains the same length (even though it’s changed in the style menu).

Any help gratefully received.

Thanks


Here is my public share link: LINK
(how to access public share link)

#2

@sparky great questions!

Setting the menu button to absolute positioning, should then allow you to set the menu to absolute positioning to have the same vertical alignment on both elements. You will need to give the Menu button a higher z-index as well after doing so to ensure it sits on top of the menu.

For the line widths, the 35px setting on line 2 is coming from the navbar open/close legacy interaction (just modify it to go to 25px instead of 35px as a fix):
CloudApp

Please let me know if this is helpful :bowing_man:‍♂

1 Like
#3

Perfect! Thanks so much @waldo.

1 Like