Jumping Header

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

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?

Hmm, in that case it’s likely that this is caused by …

https://themes.trac.www.ads-software.com/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

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

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

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.

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="https://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

Please confirm …

What browser are you using? We’ve tested your site on Safari, Chrome, Firefox and Opera on MacOS.

Thank you.

Oliver

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 2 years, 2 months ago by Edwin.

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.

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.

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

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.

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

Marking this as “resolved” now.

Oliver