Extra Scrollbar Issue

Greetings WPMUdev,

I'm using a premium plugin (Superfly Menu). The issue doesn't seem to be caused by this plugin or any other, though is associated with this plugin. It looks like the cause is somewhere else.

This is the issue I'm having with an extra scrollbar being added, and is a particular nuisance on responsive versions.

On a test site, I ran identical tests. First I installed the 2017 theme with the Superfly Menu plugin installed. There was no extra scrollbar. Then I switched to the same theme use on the live site (via Upfront). Still no extra scrollbar issue. So then I started to mimic each individual setting for the plugin. Yet I still couldn't replicate the issue.

Then I implemented a plugin conflict test and still found no issue with any other plugins. I even enabled them all on the test site and couldn't replicate the issue.

I added the same Global CSS as well with no go.

I'm not sure how else to proceed to solve this issue and was hoping you may shed some clarity on this matter.

Best Regards,
C Bey

  • Adam Czajczyk

    Hello Ciro Bey,

    I hope you're well today and thank you for your question!

    The issue is actually caused by the Superfly Menu and I suppose that you may have not been able to replicate it easily because of... screen resolution used.

    The Superfly Menu plugin for some reason adds this rule to the "body" element on site:

    overflow-x:hidden

    I suppose that the idea was that if the menu is to wide it simply gets hidden. While that probably would work well with "old-fashioned" fixed-width design it breaks in case of some responsive CSS grids (like the one used with Upfront) and shows the scroll bar.

    That said, I accessed your site and added following CSS rule to "counteract" that:

    body {overflow-x:visible;}

    This rule is added to the "Superfly Menu -> Advanced" page in the "Custom CSS" box.

    I hope that helps!

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Ciro Bey!

    I understand that it helped? I'm glad to hear that :slight_smile:

    As for why that happens. Actually, what I suggested was what I think would be the most logical explanation. The fact that you tested in both cases with the same browser and device makes me confused a bit but there's another possibility: a slight changes in some elements on the page (in terms of width) could also cause that. To be honest, the way that SuperFly menu is styled doesn't look very good but since this is an internal/default code we couldn't change it because it's there on purpose. Therefore, I would just leave it as it is and if the rule I shared works, it should be good to go :slight_smile:

    Best regards,
    Adam