If you have a class in the class manager called ‘navbar-nav li a’ (with the spaces) i.e. the Bootstrap 5 class in order to stylise the nav bar hover effects and then set (only) the :hover in the class manager to have a background colour and a radius of 10 on all sides i.e.
When you mouse over enter and leave you have a temporarily flash of the squared background before the radius is applied.
The only way around this is to set a ‘:normal’ with no background colour, but a radius of 10.
This stops the flashing of the squared background - but I don’t understand why this ‘hackyness’ is required.
Is this a bug with Bootstrap or Blocs?
Here’s a .mov of it glitching if you don’t add the ‘:normal’ with transparent colour but with a radius the same as the hover background.
It is confusing behaviour, especially when first working with classes and the Bootstrap framework.
Bootstrap assigns styling to make the navigation look the way it does, it already has classes assigned to give it that vanilla/natural look.
When you assign your own classes you are overriding the originals with your own style instructions. As you have only overridden parts of the navigation style, a lot of the base style is still coming through and creating the odd flashing. Once you adjust the normal state, this goes away. Thats because you have also overridden the normal state as well. It’s basically more padded out styling instructions to override the originals.
Regarding the flickering in the radius (if I’m understanding your post correctly) is because you only have a rounded edge on the hover state, not the normal state. So when the link is not in hover state, it’s returning to the default radius of 0. The fact that the browser renders this before the background colour disappears is likely caused by a css transition (on the background colour) which will make the background colour fade, but the corner snap.
Your workaround is a more complete styling solution.
Thanks Norm. Having to put a radius on an otherwise transparent ‘background’ to remove this glitch is very counterintuitive, but at least it’s working.
Very opaque and illogical workflows this website business…
