Recreating Codepen in Webflow

Design help Custom code
1

I want to recreate in the Designer the red indicator for a navbar as shown in the example below:

The thing is, that i cant control the nav through the Designer and i have very little knowledge in code.

Read only: https://preview.webflow.com/preview/tests-26d031?preview=f1255659964869f0f8f42c0c17acef41

Live site: http://tests-26d031.webflow.io/

  • In the project i added a bottom navbar for ease of use while working, it has nothing to do with the Codepen element.

The first thing I tried was to copy the code and embed it in all the right places: CSS - header, JS - footer, HTML - embed code, which worked out well. You can see the test on the “Embedded code page”.

Second thing was to try and change the first 3 links in the nav so that they will link to three different pages (Page 1, Page 2, Page 3) - which didn’t work.

The third thing was to try and build it from scratch in the designer, but once i got to the CSS i started to get lost.

Can anyone please guide me on the steps i should be taking?

2

Hi

Maybe this isn’t the help you want but I did a quick test of a similar effect for fun here:
http://forum-60215.webflow.io
The links has a fixed width and I moving the border div inside of a link wrapper with IX2 and percentages.

You also need to think about page transitions. For a user when a link to another page is clicked the new page is gonna load if you don’t stop it.

So one approach would be to use a script thats delays the page transition, make your animation and then the page transition happen. On the new page the link is marked as the user would expect.

Maybe some other have other tricks or tips for you =)

3

Hi @jorn ,

The test you did looks pretty nice, it’s not quite what i’m looking for but maybe there are things to learn from it.
Could you please share a read only link?

4

Sure, here it is:
https://preview.webflow.com/preview/forum-60215?preview=aa100b34d0ff4fa0c5e7bd2a7fbeab41

5

Check the Page 2, I did some modifications. Sorry about the naming it’s a mess. I now moved the border with px instead I also added size, the middle link is only 150 in width the other two is 200.

6

So just to help you or someone else out a bit, still not exactly what you are after but still some cool effects :grinning: (maybe)
I made a collection and a nav that links between the items. When a link is pressed there’s a slight page transition delay(customs code) and a interaction is executed. When the new page loads a load interaction is set.
http://forum-60215.webflow.io/test/one

I’ll think I leave this now, I can’t figure out how to do that inside Webflow. I’m sure it’s possible to add that code but I leave that to some one else.

Good luck

7

@jorn You nearly nailed it!
That’s very close and gives me something to work on, thank you so much :slight_smile:

1 Like