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 CLS on mobile

Browse Source 
Adds minimal CSS in <head> before wp_head() to hide navbar-collapse
on mobile before Bootstrap loads. This prevents the 0.245 CLS caused
by Bootstrap calculating dimensions on an element that should be hidden.

The CSS in critical-bootstrap.css was arriving too late (via wp_head)
to prevent the initial layout shift.

🤖 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:36:22 -06:00
parent d145d4dfde
commit ee28baafd8
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
header.php
View File

@@ -14,6 +14,14 @@
<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>