Search code examples
csswordpresssliderpositionscreen

CSS Page Position Issue

On my website https://www.hcldesign.co.uk/ you can see that I have a top banner. This banner has a button saying 'see website example' and when this is pressed it changes the slide image. Now this also causes a weird screen position glitch with my navbar and content/body section.

When you click the button you can see a gap appears on the left of the body and pushes some content to the right by a few pixels and then flicks back. The position of the navbar also does the same when the button on the slider/banner is clicked.

I have tried messing with the position code for some of the elements but can't seem to fix this.

I need to keep the page content in the same position when the button is clicked.

Solution

  • Its caused by this CSS rule:

    .ls-overflow-hidden {
    overflow: hidden;
}

    This class is added to your <body> element when clicking "see website example". Change the value to i.e. overflow: auto; and the glitch should be gone.