diff --git a/blockbase/sass/blocks/_navigation.scss b/blockbase/sass/blocks/_navigation.scss index 1e100ad8ce..d7c95e1478 100644 --- a/blockbase/sass/blocks/_navigation.scss +++ b/blockbase/sass/blocks/_navigation.scss @@ -35,6 +35,7 @@ .wp-block-navigation-item { align-items: flex-start; } + .wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS .wp-block-navigation__submenu-container { font-size: var(--wp--preset--font-size--normal); diff --git a/videomaker/assets/theme.css b/videomaker/assets/theme.css index 9656df1213..d81dbf62a9 100644 --- a/videomaker/assets/theme.css +++ b/videomaker/assets/theme.css @@ -103,12 +103,19 @@ div.post-meta a { align-items: flex-end; } +.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container { + font-size: var(--wp--preset--font-size--large); + font-weight: 200; +} + .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__container { row-gap: 1rem; } .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { align-items: flex-start; + margin: 0 auto; + max-width: 800px; } .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item { @@ -124,13 +131,18 @@ div.post-meta a { } .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { - justify-content: space-between; + flex-wrap: nowrap; + justify-content: center; } .wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container ul.wp-block-social-links { padding-bottom: calc( var(--wp--custom--gap--vertical) * 2); } +.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { + font-size: var(--wp--preset--font-size--medium); +} + footer > .wp-block-group { align-items: center; justify-content: space-between; diff --git a/videomaker/block-template-parts/header.html b/videomaker/block-template-parts/header.html index d90373b5e3..91c716faec 100644 --- a/videomaker/block-template-parts/header.html +++ b/videomaker/block-template-parts/header.html @@ -7,6 +7,6 @@ - + diff --git a/videomaker/sass/_navigation.scss b/videomaker/sass/_navigation.scss index f7dddaa289..cc5aa98caf 100644 --- a/videomaker/sass/_navigation.scss +++ b/videomaker/sass/_navigation.scss @@ -5,12 +5,17 @@ .wp-block-navigation.is-style-blockbase-navigation-improved-responsive { &.is-responsive .is-menu-open.wp-block-navigation__responsive-container { + font-size: var(--wp--preset--font-size--large); + font-weight: 200; + .wp-block-navigation__container { row-gap: 1rem; } .wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS align-items: flex-start; + margin: 0 auto; + max-width: 800px; // This should match the content width .wp-block-navigation-item { row-gap: 0rem; @@ -25,10 +30,17 @@ } } .wp-block-navigation__responsive-container-content { - justify-content: space-between; + flex-wrap: nowrap; + justify-content: center; } ul.wp-block-social-links { padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 ); } + + .wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS + .wp-block-navigation__submenu-container { + font-size: var(--wp--preset--font-size--medium); + } + } } }