Double scroll bar on homepage

Hi, please, try running a plugin conflict test. A plugin is adding overflow-x: hidden to the body tag.

Temporarily deactivate all plugins. Are you able to find a working baseline? If so, re-activate your plugins one by one or in batches until the issue re-occurs.

It appears to be an issue caused by Smart Slider 3, but only on the home page. My other pages that use it all seem to be working fine.

Can you perhaps change the slider from Full-Width to Full Page without altering the design?

https://smartslider.helpscoutdocs.com/article/1776-fullwidth-layout

Hi @misplon

Seems like there’s an overflow-x: hidden both on the html and body tag. Certain animations in Smart Slider might cause vertical scrollbars, so by default we add an overflow-x: hidden to the body. Since you already have that on the HTML element, you shouldn’t need it on the body as well. Try changing the Overflow-X setting at Slider settings > Size tab > under Layout: Full width to None:
https://smartslider.helpscoutdocs.com/article/1776-fullwidth-layout

I think that would sort this out.

Thanks, Ramona.

@misplon it won’t give me an option to do full page. It’s either boxed or full width.

@nextend_ramona I have changed this Overflow-X Setting to none and still having the same issue. I also removed any and all animation from this slide to also try to eliminate the issue without any luck.

Thank you for any help and advice you can give!

Hi @techguyonanisland

The top slider is Boxed now and that type doesn’t add overflow-x: hidden to anything, but there’s another Full Width slider (#4) on your page down below that still have the Overflow-X setting on body. Can you try setting the Overflow-X at that slider to none as well?

Edit:
I’m not sure I understand the reason (seems like a weird glitch for me) but it seems that the overflow-x: hiddens conflict with the icons in the footer menu. Removing everything else but the footer tag from the Inspector makes a scrollbar appear in the footer:

View post on imgur.com

And it seems to happen because there’s a CSS that targets the menu item links:

.bottom-bar-menu .menu li a {
    color: #acaeaf;
    display: block;
    font-size: 11.99996px;
    font-size: 0.85714rem;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    white-space: nowrap;
}

if I uncheck either the height or line-height properties, the problem gets fixed. Unchecking the height makes the footer element have 56px height instead of the 50.2px when the height is enabled.

So based on this the footer would need a bigger height than it currently has and for some reason it seems like the double overflow-x:hiddens make the footer “want” to display the cropped parts. Weird.

• This reply was modified 2 years, 7 months ago by Ramona.

I have got the issue temporarily resolved by changing the 2nd embedded slideshow to boxed. I would like to resolve this issue as it was working correctly before, I am not aware of any changes I have made in the past 8 weeks to the home page that would of caused this issue. My boss preferred the look of it previously and so I need to get it looking like that again. Thank you for all your help. I will investigate more into the footer issue this afternoon!

Hi, if you restore the scrollbar issue I’ll take a look at the feedback that has been provided so far.