Appetite – Creating a down arrow! Help!

tanishqkumar · Member · May 19, 2017 at 4:31 pm
Copy link

Add topic to favorites
Hi!

How do I create put in a small down arrow onto my home page that indicates to the user that they should scroll down for more content? Any other features that indicate the user should scroll down are acceptable, too. How can I make this clear, and what is the CSS I should put in for this to happen?

Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 19, 2017 at 9:12 pm
Copy link
Hi, you will need to find an image to use as the arrow and upload that to your media library and get the URL of that image and replace URL_OF_IMAGE between the parentheses. I would suggest an image that is about 50 pixels square.
```
.hero:after {
	display: block;
	content: url('URL_OF_IMAGE');
	text-align: center;
	margin-top: 20px;
}
```
tanishqkumar · Member · May 20, 2017 at 6:54 am
Copy link
Hi! Thanks for the quick reply.

I tried this code, and it puts the arrow below the sliding gallery on my home pager (.hero:after) whereas I wanted it at the bottom of the slider on the homepage so it can be seen when the user first arrives at the page.

Also, when I put the code in, it doesn’t show up. Instead, theres just a small blue box with a white question mark in it (denoting an error). This happens with whatever image I use. I looked up other solutions, and they involve complex css and jquery changes, which I’m hesistant to make.

I also don’t know what you mean by the ‘URL’ of the image: the URL on my computer or the URL on google images? I tried copying the link from google images and using that, and it doesn’t work either (small blue box with white question mark on it again).

Can you clarify exactly how I can fix this? Ideally, I’m looking for a down arrow like on https://www.google.com/drive/ that indicates the presence of more content. A bouncing arrow would be fine, too.

Please help!

Thank you!
tanishqkumar · Member · May 20, 2017 at 7:00 am
Copy link
I also tried using:

and couldn’t get that to work either, though that’s ideally what I’m looking for. To clarify: I need this to be on the bottom of the slideshow on the home page (not after/below the slideshow), so it’s visible as soon as you arrive at the site.

Thanks,
thesacredpath · Member · May 22, 2017 at 8:23 pm
Copy link
We can move the arrow up to the bottom of the image. Add this to the bottom of your custom CSS and see what you think.
```
.hero:after {
	display: block;
	content: url('https://careerfeardotorg.files.wordpress.com/2017/05/scrollarrow.png');
	text-align: center;
	position: relative;
	top: -70px;
	z-index: 1;
}
```
The code from CodePen would be hard to implement here since we would have to be able to edit and add to the theme HTML, which we can’t easily do here at WordPress.com.
tanishqkumar · Member · May 23, 2017 at 7:34 am
Copy link
Cool, thanks! However, when I try to replace the url you gave me with another type of arrow, the same blue box with the white ? comes up in it’s place. For example, I have another arrow png called (email visible only to moderators and staff) and added that to my media,edited it and then replaced scrollarrow.png with that, resulting in the same problem.

How do I fix this so I can choose which png arrow I’d like to use without this blue/white error box coming up.

Also, optimally the arrow would have a bounce animation every 2s to indicate to scroll. How can I add the bounce animation to the arrow like you saw on the codepen?

Thanks so much!
tanishqkumar · Member · May 23, 2017 at 7:36 am
Copy link
Also, do you know how I can get this down arrow to appear in certain or all my child pages, where there is a large image at the top taking up much of the screen? (with more content below).

Thanks!
thesacredpath · Member · May 23, 2017 at 11:55 pm
Copy link
Hi, the URL you gave above is an email url. You have to download that image to your computer and then upload it to your Media Library and then get the URL of that image from your Media Library and use that one.

No items found.