Second webpage scroll bar appearing quickly and then vanishing on all my pages on all of my PRO sites

[King]

Hi,

I have an issue where on every page (even those without sliders) quickly showing a second scroll bar and then disappearing. I need to prevent this from happening. Do you have any idea how I can resolve this?

example sites:

HLC Secondary

https://queensway.school

thanks

Chris

[tristup]

Hi Chris,

Thanks for reaching out.
The double scrollbar appears only if some of the elements is taller or similar in height to its container. I suggest you check by deleting the section of the specific pages one by one till the issue is fixed, and the last one you have deleted before the fix is the actual issue.

Hope it helps.
Thanks

[King]

HI @tristup, I have found what seems to be causing the double scrollbar to quickly appear and disappear. In my headers, i have added a mega menu. In the case of https://hadleylearningcommunity.org.uk/secondary, only the contact menu in the header is a mega menu. If i hide the menu then the scroll bar does not appear. When i unhide it, the scrollbar does its trick again. I have a few sites where each header has multiple mega menus so we can have fancier menus for our websites. Do you know of how i can fix this as i really want to keep my new mega menus in the headers.

thanks,

Chris

[tristup]

Hi Chris,

It seems that you found the cause behind the issue. What I can assume may be padding or height has been set to the Mega Menu which can be a reason. I would suggest you check that, and if that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[King]

Thanks @tristup, would you mind taking a look as to where i have gone wrong? I will leave the details on a secure note on this. Many thanks

[tristup]

Hi Chris,

I investigated the Header assigned to the Home Page named Homepage Header and didn’t find any content in it, I have also checked the Homepage Header Backup and it is also blank. I have checked the Global Header but that is not assigned to the Home page where the issue occurred. Can you please confirm this once?

Thanks

[King]

@tristup

Thats odd. I have just had to perform a recovery from backup and they are back now. I will add updated login details as a secure note to this post. Thanks.

[tristup]

Hi Chris,

I investigated the Homepage Header and found that the first Mega Menu and the Raw Content of the second Mega Menu are the reason for your problem. You need to check the height of all the elements including the HTML content added into the Text element and in the Raw Content element. As per support policy, investigating content and related issues are beyond the scope of Theme Support.

Thanks

[King]

I have just looked at this and i dont think that the height is the case. For example, i can hide the 2 divs in the mega menu, create a new div and leave it empty, save and no second scroll bar pops up. The moment i add in an element into the mega menu such as a blank div or a row, or an image, literally anything then the second scroll bar does the appear and then vanish act again.

I then removed my contact mega menu and left the newsletter pop up mega menu and again no scroll bar. Then i added a new untouched mega menu element with your demo content in and again the second scroll bar appeared so is this an issue with the theme where it does not like a drop down mega menu in the header?

I think my issue is similar to this post:

Double-Scrollbar being caused by Header

Hey there, My website at voelivre.net is having a double vertical scrollbar when loading the pages. They disappear but cause navigation issues sometimes. I’ve managed to audit the Global CSS on the site and everything seems good at the global level. I’ve tested with an empty Header, and the site shows no double-scrollbars. I’d need your help to try finding what CSS (at the headers) is causing that double vertical scrollbars. As you find, would you please point to me, so I can fix on all Header…

I have added a test header to a test page here that you can see. Keep you eye on the right when the page loads to see the issue. Made the header as simple as i can with just a mega menu drop down element.

https://hadleylearningcommunity.org.uk/secondary/test

Also as a test, i created a brand new site and the first time you load the page probably as the first time you go to it, its its slowest loading time compared to just hitting refresh, you will see the second scroll bar quickly. now if i was to add a load of info to the page to slow the page load down then you would see the scroll bar more easily. This test site has no plugins or CSS, just the pro theme and again the minute you add the mega menu - dropdown element, it has this effect.

https://hadleylearningcommunity.org.uk/test

thanks,

Chris

[tristup]

Hi Chris,

I had a discussion with my colleague Rad, and he suggested the following custom CSS which I have added through the Stylebot tool temporarily in the browser and it worked. I would suggest you add the same in the Theme Options > CSS, and let us know how it worked.

.x-dropdown:not(.x-active) 
{
    display:none !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[King]

Hey @tristup @rad. Thank you for your help. I added your code and whilst it did solve the extra scrollbar appearing, it made my mega menu go off the screen to the right instead of judging the screen and going left as normal so i dont know if the code can be tweaked to correct this? I have removed your code at the moment. ( i have attached an image showing the contact menu going off screen to the right so you can see this). As a test i completely removed all other css and it still behaved in the same manner.

@tristup i do appreciate your comments but this does come down to a bug in the code with the PRO theme and not custom coding on my behalf which was evidenced with a fresh site i set up with only PRO theme installed and no extra CSS. To be fair to yourselves, you always provide great support and shouldn’t have to come up with custom codes but bugs happen I guess, You may wish to highlight this with your devs to correct in the next release as it really should just work without bugs out of the box if the customer hasnt added extra coding. :). Thank you as always

Chris

[fabiofava]

@tristup

.x-dropdown:not(.x-active) 
{
    display:none !important;
}

In my case I have double-scrollbars in only ONE page of my site. That page is an exact copy of other page that doesn’t show any issue. It may be the The Grid element, or it’s container column or line… But I’m really bad to find those things, skating on that for months now…

[christian]

Hey Chris,

Your issue is similar to this thread.

https://theme.co/forum/t/mobile-site-broken-after-pro-update/94205/3

The Pro Dropdown causing the double-scrollbar is a known issue and it’s already in queue for investigation by our development team. Please stay tuned for updates.

Thanks.

[King]

Hey @christian , thanks for the update Its good to know that the devs are picking it up as alot of peopple will instantly use the mega menu dropdown in the headers as they look great and was the thing that everyone was waiting for. Hopefully it’s picked up soon. Is there an easy way to check on the update status of particular bug fixes? I know the scroll to top option was broke in a later theme update so these are really the only 2 things that i am waiting for. Thanks again.

[christian]

Hey Chris,

Bugfixes are added in our Changelog during version releases. Here’s the link for Pro https://theme.co/docs/changelog/pro-5