Title: Jumping Header
Last modified: September 3, 2022

---

# Jumping Header

 *  Resolved [Edwin](https://wordpress.org/support/users/mmhgloba/)
 * (@mmhgloba)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/)
 * Hello,
 * Thank you for the very nice plug in. There is a minor issue with the header menu,
   I have it set to the top and the page seems to load first then the menu loads
   which bumps down the rest of the page. How can we fix this? Seems that the menu
   should load simultaneously or first then the rest of the page in order.
 * As it is now the header jumps around it does not look right.
 * Thank you!
    -  This topic was modified 3 years, 9 months ago by [Edwin](https://wordpress.org/support/users/mmhgloba/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fjumping-header-2%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 15 replies - 1 through 15 (of 15 total)

 *  Plugin Author [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15975797)
 * Hi,
 * Hmm, if this is what I think it is then it’s caused by the nav transition that
   the theme has.
 * Have you tried “Customizer – Nav Options – Prevent Nav Transition” … ?
 * Oliver
 *  Thread Starter [Edwin](https://wordpress.org/support/users/mmhgloba/)
 * (@mmhgloba)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15975980)
 * Yes, I found that under nav options but it is not effective.
 * I had this issue on another wordpress website, we put in CSS code that unset 
   the #masthead. I tried the same code but it does not work on this site.
 * Can we try some manually implemented code that would better target this issue?
 *  Plugin Author [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15976091)
 * Hmm, in that case it’s likely that this is caused by …
 * [https://themes.trac.wordpress.org/browser/twentyseventeen/3.0/assets/js/global.js](https://themes.trac.wordpress.org/browser/twentyseventeen/3.0/assets/js/global.js)
 * … specifically line 186 which sets the menu as having a class of `site-navigation-
   fixed` when the site loads because conditions exist whereby the menu is always
   fixed rather than being inline on loading.
 * To prevent this making a difference, you could try adding the following into “
   Customizer – Additional CSS” …
 *     ```
       @media screen and (min-width: 48em) {
       .navigation-top {
       bottom: auto;
       position: fixed;
       left: 0;
       right: 0;
       top: 0;
       width: 100%;
       z-index: 1000;
       }
       }
       ```
   
 * Let me know if that helps.
 * Oliver
 *  Thread Starter [Edwin](https://wordpress.org/support/users/mmhgloba/)
 * (@mmhgloba)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15976303)
 * No luck with it, the nav menu definitely seems fixed, I changed “position” setting
   to unset, but a blank space appeared at the top, so I put it back. Either way
   the page still jumped.
 * I noticed that on PC this does not happen on the home page. Why does it occur
   on the other pages but the home page does not jump? The featured images are all
   the same size, same as on the home page.
 * On mobile all the pages seem to jump. I do not know what to do with it.
 * Thank you
 *  Plugin Author [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15977293)
 * When the page loads, the nav bar position is `absolute`. It’s not until global.
   js is run that the class is added to change the position to `fixed`.
 * We can see a “flickering” of the nav bar on your site but we can’t see it “jumping”.
 * What browser are you using? We’ve tested your site on Safari, Chrome, Firefox
   and Opera on MacOS.
 * What happens when you set a cover image in “Customizer – Header Media” does the
   issue persist?
 * What happens when you disable all other plugins?
 * We notice there’s a lot of HTML being injected before the normal theme HTML. 
   It looks like it’s created by SmartSlider? What happens when that plugin is disabled?
 * How are you adding your featured images? They don’t look like they’re being added
   in the normal way.
 * Thanks,
 * Oliver
 *  Thread Starter [Edwin](https://wordpress.org/support/users/mmhgloba/)
 * (@mmhgloba)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15977359)
 * I just reinstalled smart slider today, I re-posted the images using the plug 
   in so I would have more control over them. I just finished, so if you were observing
   the website before this I was making a lot of changes and frequently clearing
   the cache et cetera. I am finished so it is stable now.
 * I think the images may be moot point because if you go to the contact page you
   will observe that it still jumps, or flickers or whatever. It is something to
   do with the menu. The page body loads before the menu, then the menu inserts 
   itself which causes the page to jump and make room for it.
 * When the header image is big the jump is not visible because it is hidden from
   the viewer. This is as far as I can tell on PC and my mobile. So I think it looks
   much better like this, but it still needs to be fixed. Thanks.
 *  Plugin Author [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15977369)
 * Hi,
 * I’m afraid that until I can see your site without this code being injected before
   the header …
 *     ```
       <div class="n2_clear">
       <ss3-force-full-width data-overflow-x="body" data-horizontal-selector="body" style="transform: translate3d(0px, 0px, 0px); width: 1440px; opacity: 1;"><div class="n2-section-smartslider fitvidsignore n2_clear" data-ssid="2" tabindex="0" role="region" aria-label="Slider"><div id="n2-ss-2-align" class="n2-ss-align n2-ss-align-visible">
       <div class="n2-padding">
       <div id="n2-ss-2" data-creator="Smart Slider 3" data-responsive="fullwidth" class="n2-ss-slider n2-ow n2-has-hover n2-ss-desktopPortrait n2-ss-loaded" data-device-mode="desktopPortrait">
       <div class="n2-ss-slider-1 n2_ss__touch_element n2-ow" style="touch-action: pan-y;">
       <div class="n2-ss-slider-2 n2-ow"><div class="n2-ss-slider-3 n2-ow">
       <div class="n2-ss-slide-backgrounds n2-ow-all">
       <div class="n2-ss-slide-background" data-public-id="1" data-mode="fill" style="transform: translate3d(0px, 0px, 0px);">
       <div class="n2-ss-slide-background-image" data-blur="0" data-opacity="100" data-x="54" data-y="51" data-alt="Jadeite Jade Buddha, Jade Pagoda Myanmar" data-title="Jadeite Jade Buddha, Jade Pagoda Myanmar" style="--ss-o-pos-x: 54%; --ss-o-pos-y: 51%; margin: 0px; padding: 0px;">
       <picture class="skip-lazy" data-skip-lazy="1" style="filter: blur(0px);"><img src="//jadebuddha.net/wp-content/uploads/2022/09/Jadeite-Jade-Gautama-Buddha-Statue-Jade-Pagoda-Myanmar.jpg" alt="Jadeite Jade Buddha, Jade Pagoda Myanmar" title="Jadeite Jade Buddha, Jade Pagoda Myanmar" loading="eager" class="skip-lazy" data-skip-lazy="1"></picture></div>
       <div data-color="RGBA(255,255,255,0)" style="background-color: RGBA(255,255,255,0);" class="n2-ss-slide-background-color"></div></div></div><div class="n2-ss-slider-4 n2-ow">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1900 1800" data-related-device="desktopPortrait" class="n2-ow n2-ss-preserve-size n2-ss-preserve-size--slider n2-ss-slide-limiter"></svg><div data-first="1" data-slide-duration="0" data-id="6" data-slide-public-id="1" data-title="Jadeite Jade Buddha Statue" class="n2-ss-slide n2-ow n2-ss-slide-6 n2-ss-slide-active" style="transform: translate3d(0px, 0px, 0px); width: 1440px; height: 1364px;"><div role="note" class="n2-ss-slide--focus" tabindex="-1">Jadeite Jade Buddha Statue</div><div class="n2-ss-layers-container n2-ss-slide-limiter n2-ow"><div class="n2-ss-layer n2-ow n-uc-rc8QWivL9AOc" data-sstype="slide" data-pm="default">
       </div></div></div></div></div></div></div></div><ss3-loader></ss3-loader></div></div><div class="n2_clear"></div></div></ss3-force-full-width></div>
       ```
   
 * … then I’m not going to be able to help you further.
 * Also, please confirm if the issue persists when all other plugins are disabled.
 * Oliver
 *  Plugin Author [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15977370)
 * Please confirm …
 * > What browser are you using? We’ve tested your site on Safari, Chrome, Firefox
   > and Opera on MacOS.
 * Thank you.
 * Oliver
 *  Thread Starter [Edwin](https://wordpress.org/support/users/mmhgloba/)
 * (@mmhgloba)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15977481)
 * Hi, I deactivated all the plug ins and the problem persists. Where are you finding
   this code at? I did left click view source and was unable to find it.
 * I use chrome and mozilla firefox browsers, this same problem occurs on both in
   PC and mobile.
 * Smart Slider has good support, I can try and inquire with them tomorrow. Since
   their plug in is installed, they may provide some feedback about why the menu
   is lazy to load. Although the slider is apparently not causing the issue.
    -  This reply was modified 3 years, 9 months ago by [Edwin](https://wordpress.org/support/users/mmhgloba/).
 *  Thread Starter [Edwin](https://wordpress.org/support/users/mmhgloba/)
 * (@mmhgloba)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/#post-15977501)
 * I moved the smart slider code below the header, so on mobile the menu is back
   on top of the image. It looks pretty good I think, but it seems that it is still
   flickering/jumping. But less noticeable because the image is big.
 *  Thread Starter [Edwin](https://wordpress.org/support/users/mmhgloba/)
 * (@mmhgloba)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/page/2/#post-15977510)
 * The body of the page is try to jump ahead of everything when the page loads, 
   this is especially apparent on mobile. I have the images set to preload, but 
   the page body still tries to load first and it needs to be pushed down which 
   causes the flickering.
 *  Plugin Author [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/page/2/#post-15977707)
 * Hi,
 * The Smart Slider HTML is now appearing after the `<header>`.
 * If you add in this CSS …
 *     ```
       @media screen and (min-width: 48em) {
       .navigation-top {
       bottom: auto;
       position: fixed;
       left: 0;
       right: 0;
       top: 0;
       width: 100%;
       z-index: 1000;
       }
       }
       ```
   
 * … and disable javascript in your browser you will see that the slider doesn’t
   appear and the navigation bar remains at the top of the page and doesn’t flicker
   at all.
 * Your issue occurs because …
 * 1) The nav bar is being set to “fixed” after the slider has been generated by
   JS
    2) The slider is generating itself with JS after the page has loaded
 * You are right to ask Smart Slider for a solution because Twenty Seventeen theme
   is not designed to show cover images the way you are trying to. Instead, Twenty
   Seventeen is built to display cover images in the header using “Customizer – 
   Header Media”. This functionality is built into WordPress core and the cover 
   image is changed on a single page to the page’s featured image.
 * Oliver
 *  Thread Starter [Edwin](https://wordpress.org/support/users/mmhgloba/)
 * (@mmhgloba)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/page/2/#post-15977768)
 * So why does the menu flicker on pages where the slider is not used such as the
   contact page? I just installed the slider today. As you know this issue was already
   apparent.
 *  Plugin Author [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/jumping-header-2/page/2/#post-15977826)
 * Because … the theme loads global.js which injects a class “site-navigation-fixed”**
   after** the page has loaded.
 * If you add this CSS …
 *     ```
       @media screen and (min-width: 48em) {
       .navigation-top {
       bottom: auto;
       position: fixed;
       left: 0;
       right: 0;
       top: 0;
       width: 100%;
       z-index: 1000;
       }
       }
       ```
   
 * … to “Customiser – Additional CSS” that will not happen.
 * Oliver
 *  Plugin Author [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/jumping-header-2/page/2/#post-16135266)
 * Marking this as “resolved” now.
 * Oliver

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Jumping Header’ is closed to new replies.

 * ![](https://ps.w.org/options-for-twenty-seventeen/assets/icon-256x256.jpg?rev
   =1896745)
 * [Options for Twenty Seventeen](https://wordpress.org/plugins/options-for-twenty-seventeen/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/options-for-twenty-seventeen/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/options-for-twenty-seventeen/)
 * [Active Topics](https://wordpress.org/support/plugin/options-for-twenty-seventeen/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/options-for-twenty-seventeen/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/options-for-twenty-seventeen/reviews/)

 * 22 replies
 * 2 participants
 * Last reply from: [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * Last activity: [3 years, 7 months ago](https://wordpress.org/support/topic/jumping-header-2/page/2/#post-16135266)
 * Status: resolved