Bedford/Hayden: How would I create a “scroll down” indicator?

Currently I am using the Hayden template. I want to implement a “Scroll down” indicator on the bottom of my header image, like this: www.mim.fm

How do I do that? Thanks a lot in advance – I already went through Answers but couldn’t find an answer on that.

Thanks a lot.

The link you posted is to a page using the Marquee template (not Hayden). It would arguably be a lot easier to switch templates if that's the effect you're after. Design-wise the templates are very similar.

If you like Hayden too much, try the answers here: http://answers.squarespace.com/questions/34168/create-scroll-arrow-or-text-on-bedford-homepage

The link you posted is to a page using the Marquee template (not Hayden). It would arguably be a lot easier to switch templates if that's the effect you're after. Design-wise the templates are very similar.

If you like Hayden too much, try the answers here: http://answers.squarespace.com/questions/34168/create-scroll-arrow-or-text-on-bedford-homepage

Hej NeilaDot, thanks a lot for your super quick reply.

I already saw the Link you posted – unfortunately it didn’t help for my problem. There must be a way to insert such a simple arrow in the template.

If you just want a non-interactive down arrow, you can use a pseudo-element to do it with pure css:

#intro .banner-thumbnail-wrapper:after {
 content: "\e02d";
 display: inline-block;
 position: absolute;
 z-index: 100;
 color: #fff;
 width: 100%;
 text-align: center;
 font-family: 'squarespace-ui-font';
 transform: rotate(90deg);
 cursor: pointer;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 32px;
 margin-top: 100px;
}

if you want the rollover effect, or for it to be clickable, you'll have to use JS to append an element to .banner-thumbnail-wrapper that can take a :hover state and a click event.

EDIT:Get rid of the #intro and use this code:

.banner-thumbnail-wrapper:after {
 content: "\e02d";
 display: inline-block;
 position: absolute;
 z-index: 100;
 color: #fff;
 width: 100%;
 text-align: center;
 font-family: 'squarespace-ui-font';
 transform: rotate(90deg);
 cursor: pointer;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 32px;
 margin-top: 100px;
}

I really appreciate your help. @ghostcat: I copied your code in my custom CSS - unfortunately without success.

The only CSS that worked so far ist the following:

#siteWrapper:after {
 content: "V";
 position: absolute;
 top: 500px;
 width: 100%;
 text-align: center;
 z-index: 50;
 display: block;
 color: white;
}

Obviously this is only a “V”, serving as an indicator. I would be happy if someone could give me the CSS for an arrow that sticks to the bottom of the header image and maybe bumps up and down. A link or action is not necessary.

You are the best guys!

Cheers, Philipp

Do you have a link to your site? My code probably wasn't working because I was using the default Hayden template page to get the css selector. Post a link to your site, and I'll get your the correct CSS code.

There you go:

http://www.christinekastens.com

yeah, I assumed your first section had the id "intro".

Change #intro .banner-thumbnail-wrapper:after {

to

.banner-thumbnail-wrapper:after {

and it'll work.

Hi,

I applied this to my website and it works perfectly, but for some reason the arrow aims down on every browser but safari. Why is that? Is there a way to fix it?

Here is the link to my website: College Kindness

I really love how this arrow looks and its perfect but I definitely can't have it not rotate on safari so I would truly appreciate some help!

Thank you!

Hi,

I applied this to my website and it works perfectly, but for some reason the arrow aims down on every browser but safari. Why is that? Is there a way to fix it?

Here is the link to my website: College Kindness

I really love how this arrow looks and its perfect but I definitely can't have it not rotate on safari so I would truly appreciate some help!

Thank you!

I'd like to use a down arrow for Adirondack. I've tried the code above but it doesn't work. Is there an alternative that would?

I'd like to use a down arrow for Adirondack. I've tried the code above but it doesn't work. Is there an alternative that would?

This worked perfectly for me in Pacific. Thank you @ghostcat!

Is there a way to add a 'scroll up' or 'scroll to top' button to Hayden?

Is there a way to add a 'scroll up' or 'scroll to top' button to Hayden?

Hi, do I need to be in Developer Mode to make this change? Thanks

Just realised it can go into the custom CSS field...

For the interactive bit, how do i get it to actually scroll? my website:

https://www.workation.co/

It looks like a clickable link but isnt scrolling down. I would like it have it just scroll a full page

I'm using this code:.banner-thumbnail-wrapper:after { content: "\e02d"; display: inline-block; position: absolute; z-index: 100; color: #fff; width: 100%; text-align: center; font-family: 'squarespace-ui-font'; transform: rotate(90deg); cursor: pointer; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 32px; margin-top: 100px; }

@ghostcat any tips? thanks in advance!!

Hello all thanks for the great tip, does anyone have the JS needed to make the down arrow clickable to scroll down the page?

Hi @ghostcat - what would the CSS code be to complete the same scroll down function for the Moksha template. Been trying to figure out your previous answers.Many thanks