fix: resolve CSS isolation conflicts in language selector when embedded in WordPress#452
Merged
Merged
Conversation
…ed in WordPress
When the header fragment is loaded in WordPress/WooCommerce, several
Bootstrap and theme CSS rules bleed into the language selector dropdown
because the fragment CSS lacked explicit overrides.
Issues fixed in header-fragment.scss:
- .ud-nav-dropdown-toggle was not scoped to .nav-item, so min-height:40px
and padding:8px 0 (meant for nav dropdowns) also applied to the language
selector button, inflating the header from 76px to 92px
- Same scope fix applied to the responsive rule
- .selector .dropdown-toggle: use padding shorthand (0 12px 0 0) to
explicitly zero out top/bottom padding added by Bootstrap button resets
- .selector .ud-submenu: width:128px -> min-width:160px so the dropdown
can grow to fit content instead of clipping at a fixed size
- .selector .ud-submenu-link: add padding:0 (neutralise Bootstrap
.dropdown-menu a padding), white-space:nowrap (prevent NB-NO / PT-BR
from wrapping), and font-weight:400 (override bold from
.ud-nav-submenu-link which shares the same element)
Issues fixed in _header.scss to align static site with fragment:
- .selector .ud-submenu: width:128px -> min-width:160px (static site was
reaching 160px only via Bootstrap .dropdown-menu min-width fallback;
now the intent is explicit)
- .selector .ud-submenu: add border:none to prevent Bootstrap
.dropdown-menu border from making the dropdown taller than WordPress
- .selector .ud-submenu: add hr { margin:8px 0 } to match the fragment
CSS value; Bootstrap was applying margin:1rem adding 16px extra height
- .selector .ud-submenu-link: add font-size:15px; the static site
inherited 16px from Bootstrap body while WordPress got 15px from the
fragment's .ud-nav-submenu-link rule
Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
Contributor
|
YvesCesar
approved these changes
Jul 22, 2026
Contributor
|
🚀 Starting production deploy of site header and footer fragments... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When the header fragment is loaded in WordPress/WooCommerce, several Bootstrap and theme CSS rules bleed into the language selector dropdown because the fragment CSS lacked explicit overrides. Multiple visual regressions were identified by comparing the static site (
libresign.coop) against the WordPress-embedded fragment.Root causes and fixes
1. Header height inflated 76 px → 92 px in WordPress
.ud-nav-dropdown-toggleinheader-fragment.scsswas not scoped to.nav-item, somin-height: 40pxandpadding: 8px 0— intended for the main nav dropdowns (Solutions, Features) — also applied to the language selector button. This added 16 px to the header height.Fix: scope
.ud-nav-dropdown-togglerules to.nav-item .ud-nav-dropdown-toggle(matching_header.scss), and use thepaddingshorthand on.selector .dropdown-toggleto explicitly zero out the vertical padding that Bootstrap button resets add.2. Language codes (NB-NO, PT-BR) wrapping to two lines
Bootstrap's
.dropdown-menu aadds horizontal padding, shrinking the usable space inside the dropdown below what those codes need at runtime.Fix: add
padding: 0andwhite-space: nowrapto.selector .ud-submenu-link.3. Language item text bold in WordPress
.ud-nav-submenu-link { font-weight: 600 }(meant for nav submenus) applies to the language links too because they share the class. The.selector .ud-submenu-linkrule did not override it.Fix: add
font-weight: 400to.selector .ud-submenu-link.4. Dropdown too narrow — "Help translate ✏️" clipped on the right
width: 128pxwas a hard fixed value. The static site happened to reach 160 px only because Bootstrap's.dropdown-menu { min-width: 10rem }silently overrode it. The fragment's scoped rule had higher specificity and stayed at 128 px in WordPress, leaving only 96 px of content area — not enough for the CTA text (~114 px).Fix: change
width: 128px→min-width: 160pxin both files so the intent is explicit and the dropdown can grow for longer content.5. Dropdown height mismatch between static site and WordPress
Bootstrap's
.dropdown-menuwas adding:border: 1px solid— 2 px extra heighthr { margin: 1rem 0 }— separator 33 px vs 17 px in the fragmentFix (in
_header.scss): addborder: noneandhr { margin: 8px 0 }inside.selector .ud-submenu, making the static site match the fragment's intentional values (both 285 px).6. Font-size mismatch in language items (16 px vs 15 px)
The fragment CSS sets
font-size: 15pxvia.ud-nav-submenu-link, which applies in WordPress. The static site inherited 16 px from Bootstrap's body because.ud-nav-submenu-link { font-size: 15px }in_header.scssis nested under.nav-item .ud-nav-submenuand does not reach the language selector.Fix (in
_header.scss): addfont-size: 15pxto.selector .ud-submenu-link.Note
Only reproducible at WordPress side.