Floating “Go to top” Genericon

[Remus]

Hi everyone!

Please, anyone have an idea/

It’s been a long time since my last css efforts, and I forgot a lot. Now I am trying to add a floating Genericon at the site bottom-right.

Just a short note first: the code from this tutorial use the wrong quotation marks, and doesn’t display an icon.

The code below works just fine on my site. I just can’t remember how to make it always visible while the page is scrolled on desktop or mobile.
<span class="genericon genericon-collapse" style="fill: rgba(63, 102, 125, 0.9);font-size:50px;background-color: rgba(63, 101, 124, 0.2); border-radius: 9px;"></span>

This is the site. Try a search for updated pages.
Thanks!

[scrambler]

If you mean you want the icon fixed over the rest of the site as it scrolls, we can only help you if you explain in details where you want the icon to be displayed, knowing it will be on top of the rest of the site, and will therefore hide stuff.

 

[Remus]

Bottom-right, but obviously with transparency for background.

 

[scrambler]

Bottom right of the wrapper or the browser?

[scrambler]

Just use the amended code below

<span class="genericon genericon-collapse" style="position:absolute;right:10px;bottom:10px;fill: rgba(63, 102, 125, 0.9);font-size:50px;background-color: rgba(63, 101, 124, 0.2); border-radius: 9px;"></span>

place it in the footer HTML area if you want it in the wrapper, or the HTML Insertion Post Footer are if in the browser

[Remus]

Thanks, I added it in the HTML footer area.

In the homepage it’s cached the one from Clouflare app, I will modify to have the same position when I power on the desktop.

That one take 0.5 second for each screen to scroll, for a long article it’s quite a lot.

 

[scrambler]

I am not sure if there was a question in there, but I forgot to mentioned that if you want it fixed when you scroll, you need to replace position:absolute by position:fixed

[Remus]

Sure, I modified it now. But as I scroll, the widgets roll over the icon and hide it.

I am thinking also about a link added to the icon, but can’t remember how I did it years ago.

[Remus]

I just moved the code to the last footer widget, and now on mobile stays on top of footer.
I still search for a discussion about links added to genericons.

[scrambler]

We can fix the overlay with a z-index like

<span class="genericon genericon-collapse" style="z-index:25000;position:fixed;right:10px;bottom:10px;fill: rgba(63, 102, 125, 0.9);font-size:50px;background-color: rgba(63, 101, 124, 0.2); border-radius: 9px;"></span>

But right now I don’t see it anymore
What are you trying to do with it, make it jump back to the top?

[Remus]

Search any word and will show the updated page. Now it’s perfect in the footer widget.
Yes, Go to top like the title says.

[scrambler]

This reply has been accepted as the best answer.

If you want the icon to link to the top of the page, change the HTML to the one below

<a class="genericon genericon-collapse mytop" href="#wvrx-page-width"></a>

Then add the CSS rule below to the theme Global Custom CSS rule box

.mytop {z-index:25000;position:fixed;right:10px;bottom:10px;fill: rgba(63, 102, 125, 0.9);font-size:50px;background-color: rgba(63, 101, 124, 0.2); border-radius: 9px;}

Moving the CSS to a class will make it easier to tweak

 

[Remus]

excellent, thank you! but it shows a permanent underline only on mobile, and on desktop only for hover.
And the icon should be thinner, but the background to remain the same.
I had to add !important for font-size, or else it was tiny.

[scrambler]

The underline should be removable adding the property in yellow below

a.mytop, a.mytop:hover {text-decoration:none !important;}

Not sure by what you mean by the icon should be thinner. This is a font icon, what you can do is:

• Make it bigger or smaller using the font-size
• Put more space around it using padding
• Make it thinner using font-weight (100,200,300,400,500,600,700,800,900)

If you want me to see your changes, I need you to clear ALL caches after making changes

[Remus]

Underline vanished, it’s just the font-weight that doesn’t seem to work. I used: font-weight:100 !important;
Here it is https://tinyurl.com/2p9c6bv4
Obviously I can’t clear cache every 15 minutes on shared hosting. It’s easier to search something.
EDIT
I just realized that this is the best can be done. font-weight it’s already the thinnest, and 100 doesn’t change anything.
I must delay a little upgrade for Plus Plugin, but will do later this year.
Thank you so much!

[scrambler]

Yes, this is as thin as the font will get. Beyond that you would need to use an image

[Author]

Posts