#131051 Sticky Header – show sooner issue

Landing Forums JupiterX WordPress Theme Sticky Header – show sooner issue

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • JLB

    Hi there-

    I noticed that most Jupiter X templates don’t show the sticky header until you scroll farther down the page.

    I’ve had the request a few times to show the sticky header much sooner, like as soon as you scroll past the regular header.

    I’ve gone into Customize > Header > Offset and set to 75px
    However, if we’re using a semi transparent background for the header, if you scroll down on Desktop very slowly, you’ll see a white gap appear at the top of the screen behind the header – BEFORE the sticky header appears. I’ve included a screenshot highlighting the gap.

    Could you tell me if there’s a way to avoid that and make the transition more smooth if the sticky header is set to show sooner – and if not, could you tell me how/where the JS is to set the sticky header in the theme? Maybe we can override.

    Thank you-



    Amir Rather Support Team

    Hi There

    I can’t see the white space when scrolling slowly, not even in your screenshot, could you attach a screenshot showing that.

    We can make the animation a bit slower, just add this code in Jupiter X > Customize > Additional CSS:

    .jupiterx-header-sticked .jupiterx-site:not(.jupiterx-site-body-border) .jupiterx-header.jupiterx-header-sticky-custom.jupiterx-header-custom > .elementor:last-of-type:not(:first-of-type) {
    transition: top 2s ease-in-out;

    OK, I lightened the default header overlay a bit more so you can more easily see the top of the banner background image. In the original screenshot, the yellow box is highlighting what looks like a  light gray bar going all the way across the screen behind the logo and menu. It shouldn’t be there, the top of the screen should just show the background image from the banner on the page.

    I can see it if I click the down arrow in the page’s scrollbar one click at a time. It appears on the 2nd click. Suddenly the banner background isn’t at the top of the screen, there’s a gap between the top of the screen and the top of the banner.


    I tried doing some transitions yesterday but the boss didn’t like it and so wanted me to email to ask where the js code is that controls the sticky.


    Mohsin Al-Rabieai Support Team

    Hi JLB,

    I give you some advice that will make it a much better experience using the sticky header:

    1 – Do not enable it for mobile and tablets.
    2 – If you are using Elementor Pro, never use the approach that Elementor Pro advises to have the sticky header. It has a conflict with Jupiter X approach and will cause gaps and gliteches.
    3 – Set the offset always greater than or equals to the header height.

    In case you want the sticky header to start sooner (like 75px) it’s better to use the fixed header instead.

    If you follow these guidelines, you will have a smooth sticky header for sure.

    Regarding the JS code for the sticky header, it’s located in front-end.min.js file under jupiterx/lib/assets/dist/js/ folder. the thing is, this file is minified so you can’t simply edit that.



    OK great, thanks for the info. That should be all I need.

    Mohsin Al-Rabieai Support Team

    You are most welcome 🙂


Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in to reply to this topic.