Sticky Bar Header background video with link on click

Support
#1

I built a header that is similar to the default sticky bar header template (xpro) but with a background video. I need the background video to be a link when clicked. I created a custom cursor that on click will scroll to the first section of the site. If you take a look at this link youll see what I mean https://bigshotmusic.wpengine.com/ . I cant seem to figure out how to make that background video or that entire bar a link when clicked. Any help would be appreciated. Thanks in advance!

#2

Hello There,

Thanks for writing in! I have checked your site and it seems that you have resolved the issue already. When I click on the video, it will now move to the content area. If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

#3

Hey There,
I was wondering if you could explain how you were able to achieve this? I’d like to create the same experience of clicking anywhere in the footer content area and getting taken to the first section of content below the menu. I’m also working in X Pro. Here’s the WIP site: www.thebackpackerstrowel.com

Thanks!.

#4

Hi there,

He added a custom javascript to achieve that, like this

jQuery(function(o){o('#headerbgvideo').click(function(){o('html, body').animate({scrollTop:o('#homesticky').offset().top},1000);return!1})});

Then added headerbgvideo to header bar’s ID (the one with background video). Then added homesticky to the second bar’s ID (the one below the background video).

Thanks!

1 Like
#5

Awesome that worked great. Thank you!

#6

You’re always welcome!

Cheers.