Elite Hero Section Down Arrow

[Matt Campbell]

How can I change the color of the Hero Section “Down Arrow” from white to something else? Also is there a way to reduce the height of the hero section? -Thanks

[Bill Robbins]

Good Morning Matt,

You can change the color of the down arrow. Here’s how to do that:

;advance

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #hero-section .scroll-down:before {
   	color: #cccccc;
   }
   

3. Replace the #cccccc with the color you’d like to use.
4. Update your settings.

That should take care of the color. You can change the height of the hero section. By default it will be the full height of the browser window. If you’d rather specify something different you can. Add this to your Custom CSS too:

;past

#hero-section {
	height: 600px;
}

#hero-section .fit-video iframe,  
#hero-section .fit-video object,  
#hero-section .fit-video embed {
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

The first part there sets the height. You can change the 600 pixels to whichever height you’d like to have. The second style will make sure the video plays nicely with the size that you choose.

If you have any trouble or questions, just let me know.

Have a great week,
Bill

[Author]

Posts