Header stretches horizontally upon scrolling

  • Resolved deeef

    (@deeef)


    6 months, 3 weeks ago

    Hi,

    On my website, I want to implement a sticky header with name, navigation and social media links.

    If I don’t scroll, everything works just fine.

    However, if I scroll > 1px down, the header gets stretched horizontally. Due to privacy reasons, I can only provide you with two screenshots. Please let me know about everything else you might need to help me.

    https://imgur.com/a/7QnI40G

    I set my page to have “global” 10 % padding to the left and to the right and am using “Elementor Full Width” for both the header and the actual page. Does this have anything to do with it? But then again – if scrolled all the way to the top, everything is displayed perfectly

    Here’s the list of Plugins I’m using:

    Elementor Version 3.21.4?
    ElementsKit Version 3.1.3
    SHE Version 1.6.10

    Thank you very much in advance and kind regards,
    Deeef

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Robert Wattner

    (@rwattner)

    Hi,

    Im sorry you’re having problems using the plugin. It’s difficult to tell what’s happening in the screenshot. It looks like the social icons are gone?

    You have the plugin active on only the outermost container correct?

    What do you have the scroll distance set to?

    Did you set the header container to sticky? (Advanced tab > motion effects > sticky > top)

    The plugin does use CSS to make the header width: 100% after scrolling. I can’t really tell what’s going on without looking at the code.

    Thread Starter deeef

    (@deeef)

    Hi Robert,

    Thanks for your reply!

    Im sorry you’re having problems using the plugin. It’s difficult to tell what’s happening in the screenshot. It looks like the social icons are gone?
    Yes, they are “gone”, since the container is stretched beyond the viewport width as soon as I scroll down. I recorded a small video of what’s going on. Maybe that helps. https://imgur.com/a/4etnH2F

    You have the plugin active on only the outermost container correct?
    Correct, only for the outermost container.

    What do you have the scroll distance set to?
    It’s set to 1. Changing it doesn’t affect the outcome (other than “delaying” the effect).

    Did you set the header container to sticky? (Advanced tab > motion effects > sticky > top)
    Since I don’t have Elementor Pro sadly, I cannot set it as you advised.

    The plugin does use CSS to make the header width: 100% after scrolling. I can’t really tell what’s going on without looking at the code.
    I copied the source code to pastebin: https://pastebin.com/bTFpx2RV
    If you need more than that, please let me know.

    Hope this helps you helping me ??

    Cheers,
    deeef

    Plugin Contributor Robert Wattner

    (@rwattner)

    Thanks for all your answers. I’m sorry, when I said I needed to look at the code, I meant using the devtools on a live page. The static code doesn’t help much, unfortunately.

    Can you try adding this CSS?

    .she-header {
    max-width: 100vw;
}

    That code is just a guess but it might help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header stretches horizontally upon scrolling’ is closed to new replies.