Arrows in video welcome area


#1

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


#2

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


#3

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


#4

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.


#5

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


#6

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


#7

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


#8

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


#9

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


#10

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


#11

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.


#12

Hello there,

The possible solution is to use this plugin.

Regards,
Kharis


#13

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


#14

Try #primary

Regards,
Kharis


#15

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


#16

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?


#17

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


#18

Thank you.

Grant Serafy
478-951-7104