git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cls): add inline CSS to prevent navbar-collapse layout shift

Browse Source 
Add CSS rule to hide navbar-collapse before Bootstrap JS loads.
This prevents Bootstrap from calculating dimensions on an element
that will be hidden anyway, eliminating 0.245 CLS on mobile.

Target: reduce CLS from 0.479 to ~0.234

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-30 23:02:55 -06:00
parent 3bf40787ad
commit 0239191dfc
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
header.php
View File

@@ -14,6 +14,16 @@
<head> <head>
<meta charset="<?php bloginfo('charset'); ?>"> <meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CLS Prevention: Hide navbar-collapse before Bootstrap loads -->
<style id="cls-navbar-fix">
@media (max-width: 991.98px) {
.navbar-collapse:not(.show) {
display: none !important;
}
}
</style>
<?php wp_head(); ?> <?php wp_head(); ?>
</head> </head>