Double Scroll Bar on Website [closed]

Question

A website I am responsible for: www.livingsalads.co.uk has a double scrollbar on most browsers (chrome anyways). Which is obviously an issue as it looks bad and also browsers sometimes use the incorrect scrollbar that does not do anything.

One of the scrollbars actually scrolls and the other does pratically nothing.

I have tried methods that I have seen online including:

1) Removing:

html, body {
    overflow: auto;
}

from style.css. This does not resolve the issue and also causes the navigation bar on mobile to go funny.

2) Adding

.template-container {
   overflow-y: hidden;
}

Which again did not do anything.

I am running a WordPress Site.

Any help appreciated
Albert

Answer 1

You're basically getting a double scrollbar because your giving the body min-height of 100vh AND setting an overflow. It appears this was done to keep the menu in the correct position on mobile devices.

I was able to fix the issue by forcing an overflow:

html, body {
    overflow: visible;
}

That fixed things in Chrome, I assume other browsers as well but I didn't do any heavy testing.

Answer 2

Opening up your site in Chrome and playing with some CSS rules there I was able to fix the issue by adding

.main { 
    overflow-y: hidden
)

As well I was able to fix it another way by adding that same rule to .container

.container {
   overflow-y: hidden;
}

nav .container {
   overflow-y: visible;
}

These two solutions seem similar to your .template-container solution which didn't work for you... but I was unable to find .template-container in your site. As well these solutions fixed the problem in Chrome desktop and when I had Chrome emulate mobile.