Navigation bar jumping when scrolling

Hi There,

I am using the sydney them and have hit a brick wall with an issue I am facing. Everything else I’ve had an issue with, I have fixed by researching forums, but every piece of code I find for this issue hasn’t worked for me.

The navigation bar seems to go past the header image, then sorta jumps (showing a white background for a nanosecond) before it sticks to the top instead of scrolling smoothly down. This happens on every page except the home/front page.

See my website at: https://projects.website.mashtrust.org.nz/services/

I have tried the following bits of code which have not worked

@media only screen and (min-width:1025px) {

.site-header,
.site-header.fixed,
.site-header.float-header {
position: fixed !important;
}

}

@media only screen and (min-width:1025px){

#header,
#header.downscrolled{
position: fixed !important;
z-index: 9999 !important;
top: 0 !important;
opacity: 1 !important;
}

.main-content{
margin-top: 130px;
}

}

.header-clone {
display: none;
}

Can you please assist?
regards
Makho

Hi,

I can’t see any issue with your sticky menu, the only issue I was able to see on your services page is that until the logo was fully loaded the menu didn’t appeared in it’s position, which is due to image loading, so it’s normal if you use a large image as logo, but that can be fixed if you use a preloader on that page.

Kind Regards,
Csaba

Hi Csaba,

I don’t understand what you mean by the image not being loaded yet. The logo is usually already loaded and sitting in it’s position. The issue seems to be as you scroll down, when it gets past the end of the header, the logo is sorta protruding down on the white background so half of it is on the header and the other half is on the white background. Then the menu catches up and fills in the white space with the blue nav when you scroll further. I have inserted an image to show this.

If the issue is the logo, how do I use a preloader? I have no knowledge on using preloaders.

Regards
Makho

Hi,

On which page do you have the issue from the first screenshot? I’ve checked and for me the nav is always filled on your Services page.

Kind Regards,
Csaba

Hi,

That’s odd, It happens on every page except for the home page for me. I’ve even tried it on different computers and browsers and I still have the same issue. It seems to happen whenever the Nav scrolls past the header image (which is on every page except the home page of course)

Regards,
Makho

Hi,

Ok, I think I know what do you mean, while you start scrolling the background of the menu is transparent, so that’s why the menu background seems to be incomplete for you, it has a little animation that will switch the transparent menu to the sticky menu with a background color, so until that happens you see the transparent background, which is needed to show the full header picture, without to have a background color overlay on it, but you can add a background-color to your menu while it’s still on top ( the same color as your sticky menu ) with this Custom CSS:

.site-header {
    background-color: rgba(52,66,137,0.9) !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hi Csaba,

unfortunately it’s just not working quite right. Adding the code above makes the the header image impossible to see. I decreased the opacity, but of course that makes the Nav bar too light once it scrolls pas the header image. It also make the nave bar appear as colored on the splash page (i liked it being transparent on the home page then the color filling in when you started scrolling down)

Maybe I just have to accept that it’s not possible to have it the way I want.

Hi,

The way you described is what happens, so when you scroll down the background appears, it just has a smooth animation, so it doesn’t jump in ( that will look bad and may look wrong ).

Kind Regards,
Csaba