Woops, guess I don’t know how to format the css right. Additionally, my site has a password which is mobileorbust.
right: 46%; looks fairly centered to me. Adjust as desired. To get a prefect centering at various widths you need to do a calc() formula that factors in half the element width.
It’s pretty close to square if you get rid of the line feeds (\a) in content: content: "\25bc";
It’s actually off square by 2/3 of a pixel. Close enough? 🙂
I don’t think you can put links in :before elements. You probably need to add a true element to page output to make it a link. You could probably add the element to page content as custom HTML and then absolute position it where desired.
Hi @reginauniquetile ,
Thanks for supplying the link to your page and password. Next time, I would be a bit more specific about what on the page you wanted help with. I only knew by looking at the code you supplied. Just to make things more obvious and increase your chances of getting help.
Anyway, please try this code. Shout if it doesn’t work for any reason. Caveat: you need to be comfortable with HTML/CSS for troubleshooting and tweaking. I added comments to the custom code to help.
Put the HTML where I indicate in the screen grab.
Scroll Prompt Help
<!-- HTML See Comments -->
<!-- Note: your theme automatically adds some styling to links.
You will need to override them if you don't want them for this prompt. -->
<a href="#home" style="text-decoration: none !important;">
<div id="scroll-prompt-container">
<div class="scroll-prompt"></div>
</div>
</a>
Here’s the CSS. See the comments in the code.
#scroll-prompt-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-prompt:before {
display: block;
/* position: absolute; Remove so we can use Flexbox to center align. */
z-index: 9;
top: 100vh;
right: 0;
margin: -7em 0 0 0; /* This negative top margin pulls up the prompt into the hero image. */
border-radius: 0.5em; /* Slight rounding of the corners. */
padding: 1em;
background: rgba(0, 0, 0, .6);
color: #fff;
text-align: center;
font: 900 1.2em/1 "frutiger", sans-serif;
white-space: pre;
content: "\a\a\25bc"; /* Down arrrow. */
height: 60px; /* Tweak as needed. */
}
Good luck!
Thank you very much for the advice and responding. Sorry for my own late reply as I was sick a couple days.
@mlchaves Thank you for the html and css. I see where you have directed me to put the html but I do not quite understand what you mean. I edit css by using the Additional CSS tab in customize theme in the WP editor. Where do I edit the page’s html? Adding it to a widget seems to put the scroll hint in the wrong place.
Of course, I know I’m working to change something I don’t fully understand. Feel free to ignore this is you don’t feel like explaining to someone who doesn’t have the know-how yet, haha.
@mlchaves and (@bcworkz) Thank you for all your help. I have found a plugin that works for my needs. No need to explain the html, and thank you for your help again, I really appreciate it. The link is below if anyone comes across this and needs it.
https://www.echoplugins.com/wordpress-plugins/content-down-arrow/
I’m glad you found a solution. In case you want to know anyway about where to insert HTML, and for the benefit of anyone finding this topic via search, you more than likely need to edit your theme’s header.php file. The problem with doing that is your change will be overwritten when the theme is updated. To protect your changes from theme updates, you should create a child theme and copy your theme’s header.php over to the child before making changes.
