Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
philhaeb

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

Question

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.

Edited by TreyT

Share this post


Link to post

21 answers to this question

Recommended Posts

  • 3

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

Edited by ghostcat

Share this post


Link to post
  • 1

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

Edited by philhaeb

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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.

Edited by philhaeb

Share this post


Link to post
  • 0
Guest

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!

Edited by Guest

Share this post


Link to post
  • 0
Guest

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...