Full Page Hero 'Down' Arrow
URL to the page in question:
http://http://test.sanmarco-sf.com/mackage/
-
Hi Bill,
Is there a way through CSS coding to add a downward arrow to the landing/home page, as well as other pages when using a full page hero so people know there is more information below the image. The ‘Elite’ theme uses this feature.
Also, how is it that the Elite theme has a navigation bar that transitions – it has white lettering against a clear background initially, but when you scroll down it transitions to a black 1″ area background with the white lettering and stays static as the page scrolls down. Can this same look/function be accomplished with the Finesse theme? Is this special CSS coding or something that can be accomplished in the customization feature?
Thanks,
Tammy
Good Morning Tammy,
You’re welcome to add in a down arrow at the bottom of the hero section. Here’s how to do that:
- Go to the Appearance section in your WordPress dashboard and click on Customize.
- Look down for the advanced section and click on it. Then choose Custom CSS.
- In the box there, add this:
#hero-section:after {
content: ';';
font-size: 30px;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
color: #fff;
font-family: 'ElegantIcons';
}
- Save your changes.
In Elite, the header is fixed to the top of the screen and a bit of javascript is used to add a background as the user scrolls down. At this point, that’s not an available option for Finesse. Sorry about that.
Take care,
Bill
Hi Bill,
That worked – thanks for your fantastic support. Much appreciated!
Best,
Tammy
- The topic ‘Full Page Hero 'Down' Arrow’ is closed to new replies.