2 scroll bars

[Nalwi]

Hi,

There seem to be two scroll bars on my site, as seen in the screenshot, which makes web viewing and mobile viewing difficult. How can I fix this issue?

[ruenel]

Hello @Nalwi,

Thanks for writing in! In most cases, the double scrollbar is because of the not enough height of the header/footer bar. Please edit your header and your custom footer. Make sure to set the height of the bar to auto.

Hope this helps.

[Nalwi]

Hi @ruenel, I have set the height of the bars in the footer and header as auto, but the 2 scroll bars are still there.

[prakash_s]

Hello @Nalwi,

I checked your site, it seems that it is working fine now, there is only one scroll bar now. It might be the issue of the browser cache. I would suggest you clear your browser cache or check it in the private mode of the browser.

Thanks

[Nalwi]

Hi, I have followed the steps and purged cache, but still 2 scrolls bars are visible

Also, there is now a horizontal scroll bar while browsing on mobile which is resulting in a very disruptive experience.

Could you please fix these issues? as I’m not sure what needs to be done to have a smooth browsing experience.

[kory]

Hello, @Nalwi…I have checked every page on your website and am unable to replicate a double scrollbar anywhere. As mentioned previously by other members of our team, this is most commonly found when a “hard height” is set on a Footer Bar and the content within is overflowing, creating the secondary scrollbar, but your Footer does appear to use an auto height as you mentioned. If you can direct us to a specific page where you’re seeing this happening, please let us know along with any other pertinent details that can help us track this down and help locate the source for you (one potential thing to look into is that you have some sort of “protected by reCAPTCHA” widget showing in the lower right corner of some pages, this custom markup might be interfering with things in some way on your system).

As for the horizontal scrollbar, again, this typically happens when content is not formatted properly to respond accordingly on smaller screens. I see two instances where your header appears to be the source of these issues:

You will need to adjust your header content accordingly across your breakpoints to ensure that it does not overflow beyond the bounds of the device viewport that is viewing your site. Once you’ve cleaned this up, the horizontal scrollbars will go away.