Back to top sticky menu problem

Hi there,

I've checked the site on my mobile device (Android, Chrome) and I don't see this issue at all.

Can you try clearing your browser cache on the mobile device and try to check it again?

Let us know.

Please kindly check my website, it happened in the mobile version only.

Thanks a lot.

Hi there,

I just checked the site with my iPhone and Chrome browser and don't see the issue - the navigation is transparent after clicking the back to top button.

Is there a specific browser that you are experiencing this issue?

Thank you for your reply. I tried the following browsers:

1.iPhone iOS Safari. Not back to top. No transparent menu.

2.iPad the same.

3. iOS Chrome. There is a gap at the top when doing back to top.

4. Android with Chrome. After a few times back to top the problem appeared.

I tried to remove my page hero and the problem exists. I am using the element function to make the main navigation menu transparent. I selected merge with content and make the background, navigation background transparent.

I have tried to disable all plug-ins and cache system but no help. Don't know if it is about the setting of the transparent menu.

Thank you very much for your help.

Does this only happen when you click the back to top button, or does it happen when scrolling the top regularly as well?

When you click back to top and the navigation stays white, are you able to manually scroll up at all?

Only happen when I click the back-to-top button. Thanks.

When you click back to top and the navigation stays white, are you able to manually scroll up at all?

The only time I've been able to replicate this is when something forces the page to scroll down a little bit once we've reached the top (making the navigation go sticky again).

Yes, I can manually scroll to the top and make the menu become transparent again.

I have tested the site with at least 5 iOS devices included iPhone 11 max, iPhone 11, iPhone 6, iPhone 7 Plus and iPad 2020.

Thank you very much for your help.

So something is preventing the back to top script from actually taking you to the top of the page, which is why the navigation isn't going back to normal.

This is likely a conflict with another plugin/function that is altering the scroll function of your site. You may need to deactivate plugins/custom functions one by one in order to find the conflict.

Thanks. I have found the problem:

.generate-back-to-top,
.generate-back-to-top:visited {
bottom: 100px;
right: 20px;
}

The above css caused the problem. Anything I can do to solve it? Want to position the back to top button at a custom position.

Thanks a lot.

Hi Ping,

Seems you already repositioned the back to top button, is the issue fixed here?

No, not really.

I would like to position the back to top button 100px above bottom. iOS safari hide their bottom menu when user scroll. If you place the back to top button at the bottom, you need to click twice.

Any solution? Thanks.

You already have this CSS, changing the 10.5% to 100px doesn't work?

Btw you are missing a } at the end of the CSS in green box.
https://www.screencast.com/t/qa9kxvNThe

Thanks for the reply. Changing from % to px does not solve the problem.

The problem is when I added the css to position the back to top button, the problem of not going to the top of the page appeared.

I clean installed a site, tested it out with no plug-ins. I used your vacation site to test it.