style(header): compact, branded dropdown for nav-menu submenus

CSS injected via wp_head() overrides Bricks default nav-menu sub-menu
spacing (which inherits a bloated line-height + item padding via the
parent menu's settings, not addressable through Bricks's nav-menu
controls alone). Tight padding (0.55rem 1.25rem), branded navy bg with
subtle gold hover, 16rem min-width, soft shadow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-14 20:45:35 +02:00
parent 7134b70db9
commit b530b7a76f

View File

@@ -0,0 +1,61 @@
<?php
/**
* Plugin Name: Asterion — Header dropdown styling overrides
* Description: Injects a small targeted stylesheet for the Bricks nav-menu
* dropdown (.bricks-nav-menu .sub-menu) so submenu items don't inherit
* the bloated default heights. Bricks's nav-menu controls don't expose
* all the relevant selectors (e.g. line-height, item li margins), so we
* patch via wp_head() directly.
*/
defined('ABSPATH') || exit;
add_action('wp_head', function () {
?>
<style id="av-header-dropdown">
/* Sub-menu wrapper : compact + branded */
.bricks-nav-menu .sub-menu {
padding: 0.5rem 0 !important;
margin: 0 !important;
min-width: 16rem;
background: var(--color-brand-navy) !important;
border: 1px solid rgba(201, 164, 90, 0.25);
border-radius: 4px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
/* Each li : no extra spacing */
.bricks-nav-menu .sub-menu > li {
margin: 0 !important;
padding: 0 !important;
list-style: none;
line-height: 1.4 !important;
}
/* Each link : tight padding, branded color */
.bricks-nav-menu .sub-menu > li > a {
display: block;
padding: 0.55rem 1.25rem !important;
color: var(--color-text-on-dark) !important;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.4 !important;
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease, background-color 0.15s ease;
}
/* Hover : gold text + subtle bg */
.bricks-nav-menu .sub-menu > li:hover > a,
.bricks-nav-menu .sub-menu > li > a:hover,
.bricks-nav-menu .sub-menu > li > a:focus {
color: var(--color-brand-gold) !important;
background-color: rgba(201, 164, 90, 0.08);
}
/* Current page marker */
.bricks-nav-menu .sub-menu > li.current-menu-item > a {
color: var(--color-brand-gold) !important;
}
/* Remove default Bricks chevron clutter inside the submenu */
.bricks-nav-menu .sub-menu .brx-submenu-toggle {
display: none;
}
</style>
<?php
}, 999);