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

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


philhaeb

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
Link to comment
  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

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
Link to comment
  • 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
Link to comment
  • 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
Link to comment
  • 0

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
Link to comment
  • 0

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

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...