Skip to content

fixed submenu-overlay #76890

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
adithya-naik wants to merge 3 commits into from
+88 −31
Closed

fixed submenu-overlay #76890

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3158454
fixed submenu-overlay
adithya-naik Mar 29, 2026
98c2d0a
show submenu dropdown icon
adithya-naik Mar 29, 2026
cb205a0
Trigger CI
adithya-naik Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 88 additions & 31 deletions packages/block-library/src/navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -615,63 +615,120 @@ button.wp-block-navigation-item__content {
justify-content: flex-start;
}

.wp-block-navigation__submenu-icon {
display: none;
.wp-block-navigation__container,
.wp-block-navigation-item,
.wp-block-page-list {
display: flex;
flex-direction: column;
align-items: var(--navigation-layout-justification-setting, initial);
}

.wp-block-navigation__submenu-container,
.wp-block-navigation__container {
gap: inherit;
}

// Always expand/unfold submenus inside the modal.
.has-child .wp-block-navigation__submenu-container {
// Unset CSS that hides dropdown menus.
// Strip default padding from all content links inside the overlay.
.wp-block-navigation-item__content {
padding: 0;
}

.has-child {
display: flex;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center;
width: 100%;
gap: 0;
}
.has-child > .wp-block-navigation-item__content,
.has-child > .wp-block-navigation-submenu__toggle {
flex: 1 1 auto;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
}

.has-child > .wp-block-navigation__submenu-icon {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
margin-left: 8px;
}

.has-child > .wp-block-navigation__submenu-container {
flex: 0 0 100%;
width: 100%;
}

.has-child:not(.open-on-click) > .wp-block-navigation__submenu-container {
opacity: 1;
visibility: visible;
height: auto;
width: auto;
overflow: initial;
min-width: 200px;

// Position and style.
overflow: visible;
min-width: 0;
position: static;
border: none;
padding-left: 2rem;
padding-right: 2rem;
padding: 4px 0 4px 1.5rem;
margin: 0;
}

// Space unfolded items using gap and padding for submenus.
.wp-block-navigation__submenu-container,
.wp-block-navigation__container {
gap: inherit;
.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
display: flex;
flex-direction: row !important;
align-items: center;
width: 100%;
padding: 0;
gap: 0;
}

// Apply top padding to nested submenus.
.wp-block-navigation__submenu-container {
padding-top: var(--wp--style--block-gap, 2em);
.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
display: flex;
align-items: center;
flex: 1 1 auto;
padding: 6px 0;
margin: 0;
color: inherit;
}

// A default padding is added to submenu items. It's not appropriate inside the modal.
.wp-block-navigation-item__content {
padding: 0;
.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
opacity: 0.7;
}

// Default column display for overlay menu contents.
.wp-block-navigation__container,
.wp-block-navigation-item,
.wp-block-page-list {
display: flex;
flex-direction: column;
// Inherit alignment settings from container.
align-items: var(--navigation-layout-justification-setting, initial);
.has-child.open-on-click {
> .wp-block-navigation-submenu__toggle,
> .wp-block-navigation-item__content {
display: flex;
align-items: center;
width: 100%;
}

> .wp-block-navigation__submenu-icon {
display: inline-flex;
}

> .wp-block-navigation__submenu-container {
padding: 4px 0 4px 1.5rem;
gap: var(--wp--style--block-gap, 0.5em);
display: flex;
flex-direction: column;
}
}
}

// Remove background colors for items inside the overlay menu.
// Has to be !important to override global styles.
.wp-block-navigation-item .wp-block-navigation__submenu-container,
.wp-block-navigation__container,
.wp-block-navigation-item,
.wp-block-page-list {
color: inherit !important;
background: transparent !important;
}
.wp-block-navigation-item .wp-block-navigation__submenu-container {
color: inherit !important;
background: transparent !important;
}

// Override justification dropdown menu positioning rules.
.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
Expand Down
Loading