Nav Bar changes from Fixed to Absolute

Apologies – does it work through https://anielapiasecka.site/wp-admin/

Amazing thanks, that worked 🙂

Hi Alvind
Apologies this has partially fixed the problem.

I’ve noticed since implementing this, Nav bar works well, however on a page refresh the nav bar still fluctuates between CSS values. (It’s easiest to recreate in mobile views and scroll down). When I look at the dev console I can see NAV changes CSS attributes based on scroll position (Both absolute and top positioning). By default I would like to have the positioning set to fixed/sticky from the start.

You can also notice this just by seeing the main container (.site .grid-container) jumps behind the NAV bar on a page refresh initially. I’m not sure if this is a generatepress stylesheet thing or a third party JS script causing this?

Here’s the CSS I’ve added
/*
* Fixes Nav glitch switching from absolute to fixed
*/
nav.is_stuck {
position: fixed !important;
top: 0 !important;
}
nav {
position: fixed !important;
top: 0 !important;
width:100% !important
}

Any advice would be much appreciated, thanks again 🙂
Daniel

Morning! Thanks for checking Ying 🙂

I’ve checked plugins and there’s nothing causing this change.

I’m only using the Primary Menu with CSS breakpoints for mobile, and I haven’t changed the positioning to cause it to momentarily switch to absolute. The Secondary and Mobile Menus are all disabled and I checked the customize tab too.

Also I checked another website I built using GeneratePress and it has the exact same issue, but it doesn’t show visually.

With Alvind’s CSS amendments it’s looking good.

And as you say in this case it’s not causing any visual interference with a page refresh just now and hopefully with litespeed cache, that will smooth over any HTML elements jumping around in the future…

Unless you spot anything else I’ll close the thread.

Thanks
Daniel