Arrows in video welcome area

I’d like to add an arrow pointing towards the bottom of the video content (in welcome area) available below.
Can you help me ?
THANKS

Hello there,

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin

  2. Go To Settings > Header and Footer Scripts panel

  3. Paste the following code into the provided “Scripts in header:” box


<style type="text/css">
.scroll-down-arrow{
  position: absolute;
  bottom: 10px;
  left: 0;
  z-index: 5;
  font-size: 40px;
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
}
</style>

  1. Paste the following code into the provided “Scripts in footer:” box

<script type="text/javascript">

jQuery(function($) {

  var welcomeArea   = $('.site-header');
  var scrollArrow   = '<a class="scroll-down-arrow" href="#primary"><i class="fa fa-angle-down"></i></a>';

  if ( welcomeArea.length ) {
    welcomeArea.append(scrollArrow);
  }

});

</script>

  1. Save settings

Regards,
Kharis

hi, thank you very much but entered the code I saw that there are display problems in smartphones. The arrow is superimposed on the welcome logo.
Thanks again

Excuse me, overlaps if increase the size of the arrow. Rather I would like to ask if it was possible that the hops arrow or execute a movement in the loop. You do not need to be clickable. Thanks so much.

Hello there,

> The arrow is superimposed on the welcome logo.

Could you please share the link to your site, so I can be more exact?

> Rather I would like to ask if it was possible that the hops arrow or execute a movement in the loop. You do not need to be clickable. Thanks so much.

Sorry, I couldn’t get it clearly. Is there any live example I can see?

Regards,
Kharis

Hello, sorry for the delay in responding.
the link is http://www.traildelviandante.it/web/language/it/home-2/

I would like that the arrow had a leap loop to be seen and I do not need to be clickable.
Thanks so much

Hello there,

Try to replace the jQuery code I suggested on step 4 with this one:


<script type="text/javascript">

jQuery(function($) {

  var welcomeArea   = $('.site-header');
  var scrollArrow   = '<span class="scroll-down-arrow" href="#primary"><i class="fa fa-angle-down"></i></span>';

  if ( welcomeArea.length ) {
    welcomeArea.append(scrollArrow);
  }

});

</script>

You might need to clear your web browser’s cache before reloading your site to see the code changes takes affect.

Regards,
Kharis

Thank you,
I changed the code but the arrow remains in the same place. Only resizing the welcome logo change something. I would like to show you this site where the arrow shows how I would http://www.valtellinawinetrail.com/.
Thanks so much.

p.s sorry for my terrible English

Hello there,

Try adding the following CSS code before the </style> I suggested on step 3. So the final code will look like:


<style type="text/css">
.scroll-down-arrow{
  position: absolute;
  bottom: 10px;
  left: 0;
  z-index: 5;
  font-size: 40px;
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
}

.scroll-down-arrow{
  font-size: 60px;
  margin-bottom: 90px;
}

.scroll-down-arrow .fa{
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bounce 4s infinite;
  animation: bounce 4s infinite;  
} 
</style> 

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Thanks again ! I like a lot, but now the arrow is back above the logo in Smartphone…

I finally got video on my header (www.mccinternalmedicine.org) but want the down arrow to be clickable but scroll to the next section seamlessly (like just scrolling down a page) - the current arrow scrolls the page down but it is abrupt and goes down a little too far.

I previously had…


.down-arrow-wrap a{
** color: #fff;**
** font-size: 50px;**
** margin-top: 30px;**
}

and…


jQuery(function($) {

** if( $(’.welcome-info’).length ){**

** var downArrow = ‘

’;**

** $(’.welcome-info’).append(downArrow);**

This was actually fine but it did not scroll down so maybe it is just a matter of changing the a href - not sure what it would be to go to the next section?

So I used the code in this help section but, again, it goes down too abruptly, does not show up on mobile and I do not see how to change the however color (which is red)?

Thanks.

Hello there,

The possible solution is to use this plugin.

Regards,
Kharis

Okay, thanks, I will look at that but do you know what the a href would properly be?

<a href="#site-navigation”>

If I knew what the correct code would be instead of #site-navigation then I could work with the previous arrow.

Grant Serafy
478-951-7104

Try #primary

Regards,
Kharis

I looked at it and that is a bit above my limited skills - I would not even know where to put code for an anchor using the Page Builder - any other suggestions?

Grant Serafy
478-951-7104

I went back and tried to put my original code in and now the original code does not work - I noticed I have that same original code (some of it) in my Simple CSS area in Customize.

SO I have put in the code from above in this help section…

Header…

"
.scroll-down-arrow{
position: absolute;
bottom: 300px;
left: 0;
z-index: 5;
font-size: 40px;
display: block;
width: 100%;
text-align: center;
color: #fff;
}
"

Footer…

""

I would be happy to leave well-enough alone with this one but now it is leaving an annoying box around the scroll arrow after being clicked on and scrolling back up - anything to fix this and maybe the hover color and then I will just leave it be?

Hello there,

The down arrow scrolls smoothly now.

To fix it, try adding this extra CSS code:

    a.scroll-down-arrow,
    a.scroll-down-arrow:active,
    a.scroll-down-arrow:visited {
      outline: none;
    }

Regards,
Kharis

Thank you.

Grant Serafy
478-951-7104