diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index bd81b95f3bd9f..e61560d7e87a6 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -12,9 +12,10 @@ */ // Show submenus above the sibling inserter. -.has-child { +.wp-block-navigation .has-child { cursor: pointer; + .submenu-container, .wp-block-navigation-link__container { z-index: z-index(".has-child .wp-block-navigation-link__container"); } diff --git a/packages/block-library/src/navigation-link/icons.js b/packages/block-library/src/navigation-link/icons.js index 6cd15932a7199..3a44a250b084e 100644 --- a/packages/block-library/src/navigation-link/icons.js +++ b/packages/block-library/src/navigation-link/icons.js @@ -11,10 +11,6 @@ export const ItemSubmenuIcon = () => ( viewBox="0 0 12 12" fill="none" > - + ); diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 9e33ff17b7f3f..5309df8a51027 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -91,7 +91,7 @@ function block_core_navigation_link_build_css_font_sizes( $context ) { * @return string */ function block_core_navigation_link_render_submenu_icon() { - return ''; + return ''; } /** diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index bb9b1988f8049..5c8a7c1f5d7b7 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -15,6 +15,12 @@ } } + // Margin when justified right or space-between. + .wp-block-navigation__container > .wp-block-pages-list__item:last-child, + .wp-block-navigation__container > .wp-block-navigation-link:last-child { + margin-right: 0; + } + // Menu item link. .wp-block-pages-list__item__link, .wp-block-navigation-link__content { @@ -82,7 +88,6 @@ .submenu-container, .wp-block-navigation-link__container { - border: 1px solid rgba(0, 0, 0, 0.15); background-color: inherit; color: inherit; position: absolute; @@ -115,13 +120,11 @@ } @include break-medium { - left: 1.5em; - // Nested submenus sit to the left on large breakpoints. .submenu-container, .wp-block-navigation-link__container { left: 100%; - top: -$border-width; + top: 0; // Prevent the menu from disappearing when the mouse is over the gap &::before { @@ -190,5 +193,11 @@ // several times, so care needs to be taken. background-color: #fff; color: #000; + border: 1px solid rgba(0, 0, 0, 0.15); + + .submenu-container, + .wp-block-navigation-link__container { + top: -1px; + } } }