Streaming live at 10am (PST)

Hamburger menu custom CSS codepen

Hi team,

I’m trying to use this codepen effect on my Hamburg menu:

https://codepen.io/Zaku/pen/YjRqzB

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.

Does anyone know why I’m having this bug?

Is it something inside the code? here’s my share read-only link:
https://preview.webflow.com/preview/valeria-g?utm_medium=preview_link&utm_source=designer&utm_content=valeria-g&preview=15ecc04f785015444a0554ec264fe4b2&mode=preview

Thanks,
Val


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Valeria_Galati

First, I think you need to put the all the JSscript in to the"Before </body> tag"

generally speaking the Head tag is for style and CSS…

Second, you should trim the CSS and HTML so that you only are displaying what you need to.

To recap - HTML goes in the embed, CSS in to the head and scripts (and their sources) go into before </body> tag

Lastly, you should provide the link to the published site as we cannot see the custom code in preview - only on the published site.

Once that is done we can have a look at it again and troubleshoot it…

Hi,

thanks for your reply.

I have added the CSS and JS into the before tag and embedded the HTML but still not showing in the right position?

Here’s the link to the published site:
https://valeria-g.webflow.io/

Thanks,
Val

@Valeria_Galati

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:

  1. HTML goes in the Embed Element
  2. CSS is going to the Inside <head> tag,
  3. 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…

Hi,

Thank you so much for your help.

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?

Thanks,
Val

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 :slight_smile: 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

Okay, I will try there then.

Again, thank you so much for your help… I really appreciate it!

Val

here is a codepen where I deleted unneeded code… let me know if it works for you…

2 Likes

Thanks for double checking, it works perfectly now!

Val

glad that it works :slight_smile: