scroll down button

[Zac Manor]

i used the css below to put a button on the hero but it wont scroll when clicked on.

#hero-section:after {
position: absolute;
font-family: ‘ElegantIcons’;
content: “;”;
z-index: 20;
bottom: 30px;
width: 100%;
font-size: 30px;
text-align: center;
color: #fff;
}

how can i get this to be a button that scrolls down?

[Bill Robbins]

Good Morning Zac,

Excellent question. That code will generate a down arrow, but like you discovered, it won’t link anywhere. Probably the easiest way to create a link out of that would be to hijack the hero button that’s already coded and turn it into an arrow. Here’s how you would do that just for your home page:

1. Edit your home page. In the field for the hero button text you can enter something (it’ll be hidden on the page). For the hero button URL, enter #home-widgets and save your page.
2. Next go to your theme options page and choose the Advanced tab.
3. Scroll down to the Custom CSS box and add this:

   
   .home h2.hero-title,
   .home .hero-caption {
   	visibility: hidden;
   }
   
   .home .hero-copy {
   	height: 100%;
   	position: relative;
   }
   
   .home .hero-button-holder a.button {
   	position: absolute;
   	bottom: 10%;
   	width: 100%;
   	border: none;
   	visibility: hidden;
   }
   
   .home .hero-button-holder a.button:after {
   	position: absolute;
   	font-family: 'ElegantIcons';
   	content: ";";
   	z-index: 20;
   	width: 100%;
   	font-size: 30px;
   	text-align: center;
   	color: #fff;
   	visibility: visible;
   }
   
   </li>
   <li>Update your settings.</li>
   </ol>
   

   That should turn the button on your home page into a clickable arrow. It’ll take you to the start of the widgets when clicked.

   Let me know if that doesn’t get you where you’d like to go.

   Have a great week,
   Bill

[Author]

Posts