Jump to content

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

Recommended Posts

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.

Link to comment
  • Replies 21
  • Created
  • Last Reply

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;
}

Link to comment

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

Link to comment
  • 3 months later...

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!

Link to comment

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!

Link to comment
  • 2 months later...
  • 3 months later...
  • 8 months later...
  • 5 months later...

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; }

Link to comment
  • 5 months later...
  • 2 years later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.