Archived topic
Adding an animated vertical line like in starter site
7 replies · Started by Jessica on June 30, 2022
I'm using the Coach starter site template for a new site and love the line that comes down when you hover over each menu item. I see the CSS in the Customizer, but I'm wondering if there's any way to create a line like this that appears/move as you scroll down through the site (like in the center of the page showing you're moving down the page). Just thought I'd check here in case - thanks!
Hi there,
Sorry but I can't quite picture what you are after.
Any chance you can provide an example?
Sure! It's used on the primary menu on my staging site: https://cairnproject.flywheelstaging.com/
Sorry - I was wondering if you can provide an example of this:
but I’m wondering if there’s any way to create a line like this that appears/move as you scroll down through the site (like in the center of the page showing you’re moving down the page)
Oh yes sorry! Like on this site: https://www.bluecompass.com/ A line (left and bottom) appears around the Taking Your Digital Presence to the Next Level section as you scroll down.
Hi Jessica,
You would need custom Javascript Code for such an effect which would be out of our scope of support.
Here’s an example of a set of codes that run an effect based on the scroll position: https://codepen.io/tateishi-e/pen/xaEJxw
If you're not familiar with JS, it would be best to hire a developer to do it for you.
Something that doesn’t need JS which we can help you with are hover effects. For instance: https://share.getcloudapp.com/Z4uA1Jvz
Hope this clarifies!
Thanks so much for the update! Super helpful info. I forgot about Hover Effects, I'll try that. Thanks again!
You’re welcome Jessica!