I'm building my website and I have an issue with before/after element.

The slider of the element seems to be off when you first visit the page and it gets back to normal if you refresh the page. That causes elements below before/after not showing well. Any ideas? 

Also, I have my an issue with my sticky header. While my main header is in "boxed" layout, when I scroll down the sticky header is off to the right side.

Any help here?


  • Hi,

    Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please ensure that the page is not under maintenance before you provide us with the link.

    Before that please, turn off all of the plugins, refresh your cache, and check if the problem persists.

    Moreover, if you use a child theme, switch to parent, and recheck it.


  • Hi there Pfil.

    My website is and it’s online. The issues I have are a) on services page the before/after element and the sticky header exceeds on the left.

    I did as you advise by deactivating the plugins. Before after element works fine. As soon as I activate the plugins again and specific the smush (lazy load) the issue is there again. I exclude the ID of the element to lazy load but the issue persists.

    b) no change to sticky header.

    Also, I use the parent theme directly.

    Thanks in advance.

  • a) Sorry, but we did not test this plugin with the theme. Our policy states that we do not support third-party plugins or custom codes, so we cannot help you.

    Also, we cannot recommend any plugins other than the ones we support. You can find the list on this page in the sidebar:

    So if you want to use this plugin, you should contact the plugin author to resolve that problem.

    b) I have passed this info to the dev team. For now, as a temporary workaround, please, put CSS code from below to Betheme -> Theme options -> Custom CSS & JS -> CSS.

    @media only screen and (min-width: 1240px)
    	.mfn-header-scrolled .mfn-header-tmpl.mfn-hasSticky {
    		  max-width: 1920px;
    		  width: calc(100% - 50px);
      @media only screen and (min-width: 960px) and (max-width: 1239px) {
    	.mfn-header-scrolled .mfn-header-tmpl.mfn-hasSticky {
    		  max-width: 960px;
    		  width: 100%;
    @media only screen and (min-width: 768px) and (max-width: 959px) {
    	.mfn-header-scrolled .mfn-header-tmpl.mfn-hasSticky {
    		  max-width: 728px;
    		  width: 100%;


  • Hello Phil.

    a) I will replace smush with a compatible one

    b) that worked perfectly.

    Thank you very mush for your help.

    BTW your builder is amazing even for me with no previous experience in building a website. Keep up the good work!

    Thanks again

  • Glad I could help, and thanks for your kind words. 😁

    Best regards

Sign In or Register to comment.