I’m trying to use this codepen effect on my Hamburg menu:
I would like to use the first icon on the top/left.
I have created an embedded HTML into a div block.
I have added the CSS and JS compiled into the head tag page but for some reason, the position is not right-aligned as it should be.
I think your issue is that your are positioning the element using the CSS from codepen instead of webflow, nevertheless, if you will comment out the following lines from the CSS that you are using in the head section it will position the HMB in the upper right corner (I assume thats where you want it) .menu--1 label, .menu--2 label { /* bottom: 0; */}
Hope it helps…
Also - I again want to tell you:
HTML goes in the Embed Element
CSS is going to the Inside <head> tag,
Scripts and sources go to before </body> tag
When I looked at your shared site it was not moved… and also try to edit out the not needed part of codepen code - since you are using only one out of four examples a lot of that code is juste unnecessary, will slow the site down and can potentially cose problems…
I knew something was wrong but as I’m not an expert I didn’t want to remove something wrong…
It looks like is working now and I’m changing the position using webflow, I have also removed ( .menu–1 label, .menu–2 label { /* bottom: 0; */} )and moved the Scripts and sources to before </body> tag.
Could you just check if it looks okay or there are still extra parts to remove from codepen?
I’ll have a look - but the best way to edit the code from codepen to edit out unnecessary parts - as well as try and learn something new by trial and error is to do it in codepen since every time you remove something you will see if whats left is working or not…
Oh, and probably you should move the cursor follower script (unless the tutorial you followed told your otherwise) and the tweenmax src to the before </body> tag