Complex Top Nav Bar and Animations - Julie Stoian - CFDS Site Hack
Channel: Dan Havey
Date: 2022-03-14

For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks - Go To https://CFninjas.com

Check out the One Funnel Away Challenge here… https://funneldesignmastery.com/ofa-challenge

In this video we walk thru how to make a more complex top nav menu with vertical dividers and hover effects.  We also set a large background image to scale properly on varying viewport widths, as well as show how to make an image bounce on hover.

In this tutorial titled "Complex Top Nav Bar and Animations - Julie Stoian - CFDS Site Hack," Dan Havey of CF Ninja Hacks demonstrates how to recreate specific elements and animations found on Julie Stoian's website. He begins by addressing a question from Crystal about replicating an animation seen on Julie's WordPress-based site. Dan explains that although Julie's site is on WordPress, most elements can be duplicated in ClickFunnels except for proprietary WordPress features. He proceeds to cover various aspects, including the top navigation bar animation, the header's design, and image placement, along with handling images and buttons within columns. Dan also focuses on the hover animation effect, using keyframes for animation control. However, he mentions that further explanation on keyframes will be covered in a future video. The tutorial provides step-by-step guidance for recreating the elements and animations discussed.

Dan Havey presents a tutorial on replicating animations and elements from Julie Stoian's WordPress site on ClickFunnels.
The tutorial begins by addressing Crystal's question about duplicating an animation from Julie's site.
While Julie's site is on WordPress, Dan highlights that most elements can be recreated within ClickFunnels.
The tutorial covers the process of recreating Julie's top navigation bar animations, which involve subtle bouncing effects upon hovering over objects.
Dan discusses the creation of the header at the top of the page and demonstrates how to position an image on the side while keeping it centered and responsive.
Handling images and buttons within columns is explained, with a focus on ensuring proper alignment and responsiveness.
The tutorial delves into the hover animation effect seen on Julie's site, discussing the use of keyframes and how to manipulate CSS for animations.
Dan explains the animation behavior, such as smooth upward movement and bouncing effects, triggered when hovering over certain elements.
The tutorial provides practical examples and step-by-step guidance for replicating the animations and elements on ClickFunnels, with future videos promised to explore more advanced topics like keyframes.

#linchpin #mifge #flywheel