From a91ed9a65984be5b4723c51bc060aa1fd9e40ca6 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 17 May 2021 10:28:39 +0200 Subject: [PATCH 1/3] Enable justification for burger menu. --- packages/block-library/src/navigation/editor.scss | 2 +- packages/block-library/src/navigation/style.scss | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index c761af9f0cc04c..b028729cb4dab0 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -375,7 +375,7 @@ $color-control-label-height: 20px; // That means we only have to consider the big adminbar height (<783px). // And in that view we also know that the toolbar is stacked. body.admin-bar & { - top: $admin-bar-height-big + $header-height + $block-toolbar-height; + top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width; @include break-medium() { top: $header-height + $border-width; diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 0dd657fed37123..a52392cea0f237 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -352,6 +352,7 @@ } } + /** * Mobile menu. */ @@ -472,7 +473,11 @@ z-index: 2; // Needs to be above the modal z index itself. } -// The menu adds a wrapping container. +// The menu adds wrapping containers. +.wp-block-navigation__responsive-close { + width: 100%; +} + .is-menu-open .wp-block-navigation__responsive-close, .is-menu-open .wp-block-navigation__responsive-dialog, .is-menu-open .wp-block-navigation__responsive-container-content { From cacf2f55dedeb66d8f5a6952077b168d50851d7b Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 17 May 2021 15:16:00 +0200 Subject: [PATCH 2/3] Apply justification to burger. --- .../block-library/src/navigation/style.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index a52392cea0f237..3bc917d1799d29 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -460,9 +460,27 @@ // Button to open the menu. .wp-block-navigation__responsive-container-open { + display: flex; + @include break-small { display: none; } + + // Justify the button. + .items-justified-left & { + margin-left: 0; + margin-right: auto; + } + + .items-justified-center & { + margin-left: auto; + margin-right: auto; + } + + .items-justified-right & { + margin-left: auto; + margin-right: 0; + } } // Button to close the menus. From aa0f3e4e729e63bda05c3945050b3dd34293c1fa Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 17 May 2021 15:25:30 +0200 Subject: [PATCH 3/3] Fix right justification bleed into overlay menu. --- packages/block-library/src/navigation/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 3bc917d1799d29..aaf1361d82bb7e 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -187,7 +187,8 @@ // This needs high specificity. &.wp-block-navigation.items-justified-space-between > .submenu-container > .has-child:last-child, &.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child, - &.wp-block-navigation.items-justified-right .has-child { + &.wp-block-navigation.items-justified-right > .submenu-container .has-child, + &.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child { // First submenu. .submenu-container,