Do you mean the right shift when an item is hovered over? If so, add this to the customizer’s Additional CSS to disable the shift:
.main-menu ul li ul li:hover>a {
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
}
It’s not when an item is hovered over but when its clicked. When you click on an item in the menu the whole menu moves around.
Edit: Actually now that I checked it again sometimes when you refresh the entire page shifts a bit sometimes. This is so messy.
Ah, I see what you mean now. Throttling down my connection speed made it more obvious. It’s because the initial default CSS defines one size and spacing, then later CSS declares a larger size and spacing. Because it takes a short while to load and interpret the CSS, the layout shift becomes visible.
Ideally, the initial CSS should be the ultimate size and spacing so there is no layout shift. That can be difficult to find and correct. What you might try is one of the optimization plugins that concatenates various CSS files into only a few, causing them to load faster. There’ll still be a layout shift, but it’ll happen faster and be less noticeable.
You’ll also benefit by dramatically reducing the sheer volume of CSS data, but this too can be difficult to do.
@bcworkz Sorry for the late reply but where can I set that ultimate size and spacing without using a plugin?
Earlier I predicted “That can be difficult to find and correct.” I did not realize just how spot on that would be. My browser’s element inspector tool which I rely upon to diagnose things like this is failing to find the early rule. It’s strange. The font is clearly smaller when I interrupt the page load, yet the tool already reports font size being the larger size.
Because you use the Optima theme, a commercial theme, I don’t have access to its source code and thus cannot investigate further for you. What you could do is use a recursive full text search utility like grep or findstr to search all .css files, looking for all “font-family” or “font-size” rules. Those rules are the usual cause of this, but there could be other rules which could possibly affect the final text size. Edit any found to all use the same desired values.
Note that if your theme is subject to periodic updates, any such changes to theme files will be overwritten during the update process.
