_header.scss 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. .wp-site-blocks .site-header {
  2. justify-content: start;
  3. overflow: inherit;
  4. padding-top: var(--wp--custom--gap--vertical);
  5. .wp-block-navigation {
  6. flex-grow: 1;
  7. margin-top: 0;
  8. }
  9. // The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate)
  10. // It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY
  11. @include break-small-only() {
  12. gap: 2px;
  13. }
  14. .wp-block-site-logo {
  15. @include break-small-only(){
  16. flex-basis: 100%;
  17. margin-bottom: calc( 2 * var(--wp--custom--gap--vertical));
  18. margin-top: var(--wp--custom--gap--vertical);
  19. text-align: center;
  20. }
  21. a > img {
  22. height: 64px;
  23. width: auto;
  24. }
  25. }
  26. .wp-block-site-tagline {
  27. @include break-small-only() {
  28. flex-basis: 100%;
  29. order: 10;
  30. }
  31. }
  32. .wp-block-navigation__responsive-container-content {
  33. // Needed until https://github.com/WordPress/gutenberg/issues/35549 is fixed.
  34. display: flex;
  35. gap: var( --wp--style--block-gap, 2em );
  36. }
  37. }