Back to top button Label

Hi there,

Just wondering if there is a way to label the back to top button? Maybe a label within the button it’self, or a label underneath the button (the label has to be sticky as well).

Also, I used some custom code to widen the width of the submenu, but the colored line at the top of the sub menu remained the same width as the sub menu (see services sub-menu on: [Mysite])(https://projects.website.mashtrust.org.nz/). Is there a way to fix this so it expands out as far as the menu?
Here is the code i used to change the width of the sub-menu:
#mainnav ul ul a {
width: 300px !important;
}

Finally, the menu on the mobile site opens with a small but noticeable gap between it and the nav, how can I get rid of this?

Cheers,
Makho

Hello Makho,

1. Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

.go-top.show::after {
    content: 'Go to top';
    display: block;
    font-size: 10px;
    line-height: 2;
    color: #D65050;
}

2 and 3. Please create a separate topic for each of your other issues to keep forum in good order and make it easier to help you.

Kind Regards, Roman.

Thanks for that, It works, however, the font size was way to small so I changed the font pixels, which has the negative effect of making the label cut of at the bottom of the screen. Is there a way to push the button up a bit so the label doesn’t get cut off? Also, how can I use a bolder font to make it more visible? I tried “font-weight: Bold;” but it’s just not bold enough

PS: I have created separate threads for my other requests

Cheers,
Makho

Hello Makho, try this instead:

.go-top.show::before {
    content: 'Top';
    display: block;
    font-size: 26px;
    line-height: 1.1;
    font-weight: bold;
    color: #F48F42;
    bottom: 43px;
    position: absolute;
}

Kind Regards, Roman.

Hi Roman,

That puts the label above the button, which works fine, but it just looks odd. I would rather have the Label under the button or within the button itself. Is there a way to push the button itself upwards so the label can fit under it?

Cheers
Makho

Okay Makho, try this instead:

a.go-top.show {
    bottom: 29px;
}

.go-top.show::before {
    content: 'Top';
    display: block;
    font-size: 26px;
    line-height: 1.1;
    font-weight: bold;
    color: #F48F42;
    top: 37px;
    position: absolute;
}

Kind Regards, Roman.

Brilliant Thank you! that worked perfectly!
I had to change

.go-top.show::before {

to:

.go-top.show::after {

Then it worked Like a charm. Thank you for the fantastic support as always

You are welcome Makho! :slight_smile:

Kind Regards, Roman.