Incorperate codepen HTML / CSS / Script into wordpress?

I’ve messed around with another codepen and achieved what i need in my own codepen HERE (almost .. the eye graphic changes position over the fish image when changing the viewport size)

This is basically a mouse follow over an image. I’m not really very good at css and know very little about coding.
I’ve tried adding this to my wordpress theme with little success.

Basically, I’m using the Twenty Seventeen theme and want this codepen example tied to the scrolling nav.

Within Twenty Seventeen, it begins with a full width / height header image / video with the main nav along the bottom. As you scroll down, the nav obviously scrolls up the screen then becomes sticky when it reaches the top.

I want to have this fish do the same thing (scroll up then be sticky) but be around 75% down the left side.

I managed to get the fish image sort of in the right place by adding a div to the bottom of the template-parts/navigation/navigation-top-php, like this (not all of it, just the bottom part):

<?php endif; ?>
<!– #site-navigation –>
<section class=”move-area”>
<div class=’container’>
<div class=’eye’></div>

I then added the css to the customizer.
This didn’t work. I was hoping it would add the image where i wanted it with the eye graphic in place.

When I did the following, I got the fish in the right place and scrolling the same as the nav but this doesn’t use any of the code pen code and I don’t know how to associate it with it?

.fixed-test {
background: url( no-repeat left;


<?php endif; ?>
<!– #site-navigation –>
<div class=’fixed-test’>

And none of this helps with getting the script working, which seems to rely on this >

I tried adding this and the code to an ‘add script’ plugin but that didn’t work and I don’t have the skill to construct a function to add to my functions.php (which I think is probably what is needed). I did read the WP codex on adding functions but it was a bit beyond me.

I’m basically a novice trying to build a rocket with the handle of a spoon.
Any help or advice gratefully very gratefully received.
Adding this little fish, which stares at the mouse movement will be funny if I get it to work

Read more here:: Incorperate codepen HTML / CSS / Script into wordpress?

Leave a Reply

Your email address will not be published. Required fields are marked *