[zeljko.kovac97]

Hello,

Is there an option to enable the ”scroll to top” button on mobile devices? We can see it on desktop devices, but it’s missing on mobile devices.

Thanks!

This field is Private Content.

Attachments:

You must be logged in to view attached files.

[Aizaz Awan]

Hello, @zeljko-kovac97,

Go to the Dashboard and navigate to Alpus > Theme Options > Custom CSS & JS. Paste the following code at the bottom of the CSS box:

#scroll-top {
    display: block !important;
}

Save the settings, clear your browser cache, and then check your site.

Best Regards,

[zeljko.kovac97]

Hello,

Thank you for your reply. I did that, but it’s not showing the button while you scroll, but now there is a huge black circle at the bottom of the website on mobile devices.. I’m sending a screenshot.

Could you please take a look?

Attachments:

You must be logged in to view attached files.

[zeljko.kovac97]

Hello,

I just wanted to let you know that we have migrated the website to the official domain. I’m sending the new login details in the private area.
Because the Maintenance mode is active, you can see the website only after you log in.

Thanks!

This field is Private Content.

[Aizaz Awan]

Hello, @zeljko-kovac97,

Yes you are right, I have checked it on your site and found the same behaviour, it seems that back to top is not designed for the mobile version but specifically for the desktop version only and that is the reason intentionally hide it on mobile version of the site.

But I tried hard and made the Custom CSS for your issue as fix listed below:

@media (max-width: 767px) {
    #scroll-top {
        display: inline-block !important;
	width: 3.2857em;
        height: 3.2857em;
        font-size: 1.4rem;
	bottom: 1em !important;
        right: 1.0714em;
	position: fixed;
		}
#scroll-top i.a-icon-angle-up {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    color: var(--alpha-white-color);
    background-color: var(--alpha-dark-color);
    border: 2px solid var(--alpha-dark-color);
    border-radius: 50%;
    z-index: 1;
}
#scroll-top svg {
    position: absolute;
    width: 3.1429em;
    height: 3.1429em;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    z-index: -1;
}
}

Now please check back to your site after clearing the browser cache: https://ibb.co/93cjPqw

Best Regards.

[zeljko.kovac97]

Hello,

Thank you!

There is only a minor issue left. The progress line that goes around the button is not making the correct circle around the icon. I’m sending the screenshot.

Is it possible to fix it or just to disable it?

Attachments:

You must be logged in to view attached files.

[Aizaz Awan]

Hello, @zeljko-kovac97,

Please update the top and left values in the SVG code to -4px as shown in my previous instructions. After making these changes, review the result. For reference, see this screenshot: https://pasteboard.co/3fDy4IwyYJ5r.png

This should resolve the issue.

Best Regards.

[Author]

Posts