The best way to prevent the secondary nav flicker is to hard-code the height of the secondary nav. This involves some guess & check. Adjust the 4.1 value to whatever the initial height of your section might be, adjust the 3.1 values for mobile. Be sure to select the data-section-id with which you’re Secondary Nav is in. Place this into your Site Header or Page Header Code Injection Area.
<style>
body:not(.sqs-edit-mode-active) [data-section-id="SECTION-ID"] {
min-height:4.1rem !important;
height: 4.1rem !important;
}
@media(max-width: 767px){
/*mobile sizing*/
body:not(.sqs-edit-mode-active) [data-section-id="SECTION-ID"] {
min-height:3.1rem !important;
height: 3.1rem !important;
}
}
</style>
Prevent Nav Flicker - Fade in Page After Loaded
Place this code in the Page Header Code Injection area of the page with your Secondar Nav. Or in the Site Header Code Injection area if you’re using this plugin site-wide.
<script>
(function() {
window.addEventListener('secondaryNavLoaded', showPage);
window.addEventListener('load', function(){
setTimeout(function(){showPage()}, 300)
});
function showPage() {
document.body.classList.add('wm-secondary-nav-css-loaded');
}
}());
</script>
<style>
body{
opacity:0;
transition: opacity .3s ease;
}
body.wm-secondary-nav-css-loaded{
opacity:1;
}
</style>