[Summary view] [Print] [Text view]

   1  // Site header
   2  .site-header {
   3      @extend %responsive-alignwide-width;
   4      display: flex;
   5      align-items: flex-start;
   6      flex-wrap: wrap;
   7      row-gap: var(--global--spacing-vertical); // Add space in case the menu wraps below the site branding.
   8  
   9      .wp-custom-logo & {
  10          align-items: center;
  11      }
  12  
  13      @include media(mobile) {
  14          padding-top: calc(var(--global--spacing-vertical) / 0.75); // 40px
  15      }
  16  
  17      @include media(desktop) {
  18          padding-top: calc(2.4 * var(--global--spacing-vertical)); // 60px
  19      }
  20  }
  21  
  22  // Site branding
  23  .site-branding {
  24      color: var(--branding--color-text);
  25      margin-right: 140px;
  26  
  27      &:last-child {
  28          margin-right: 0;
  29          width: 100%;
  30          text-align: center;
  31      }
  32  
  33      @include media(mobile) {
  34          margin-right: initial;
  35          margin-top: 4px; // Align the baseline of the site title with the primary menu
  36      }
  37  }
  38  
  39  // Site title
  40  .site-title {
  41  
  42      color: var(--branding--color-link);
  43      font-family: var(--branding--title--font-family);
  44      font-size: var(--branding--title--font-size-mobile);
  45      letter-spacing: normal;
  46      text-transform: var(--branding--title--text-transform);
  47      line-height: var(--global--line-height-heading);
  48      margin-bottom: calc(var(--global--spacing-vertical) / 6);
  49  
  50      a {
  51          color: currentColor;
  52          font-weight: var(--branding--title--font-weight);
  53  
  54          &:link,
  55          &:visited,
  56          &:active {
  57              color: currentColor;
  58          }
  59  
  60          &:hover,
  61          &:focus {
  62              color: var(--branding--color-link-hover);
  63          }
  64  
  65      }
  66  
  67      @include media(mobile) {
  68          font-size: var(--branding--title--font-size);
  69      }
  70  }
  71  
  72  // Site description
  73  .site-description {
  74      color: currentColor;
  75      font-family: var(--branding--description--font-family);
  76      font-size: var(--branding--description--font-size);
  77      line-height: 1.4;
  78  }
  79  
  80  .site-title > a {
  81      text-decoration-color: var(--global--color-secondary);
  82  }
  83  
  84  // Site logo
  85  .site-logo {
  86  
  87      margin: calc(var(--global--spacing-vertical) / 2) 0;
  88  
  89      .site-header > & {
  90          width: 100%;
  91          padding-bottom: calc(var(--global--spacing-vertical) * 1.5);
  92          border-bottom: 1px solid;
  93          text-align: center;
  94      }
  95  
  96      .custom-logo {
  97          margin-left: auto;
  98          margin-right: auto;
  99          max-width: var(--branding--logo--max-width-mobile);
 100          max-height: var(--branding--logo--max-height-mobile);
 101          height: auto;
 102          display: inline-block;
 103          width: auto;
 104      }
 105  
 106      @include media(mobile) {
 107  
 108          .custom-logo {
 109              max-width: var(--branding--logo--max-width);
 110              max-height: var(--branding--logo--max-height);
 111              height: auto;
 112              width: auto;
 113          }
 114      }
 115  }
 116  
 117  @include media(mobile-only) {
 118  
 119      .site-header {
 120  
 121          &.has-logo {
 122  
 123              &:not(.has-title-and-tagline) {
 124  
 125                  &.has-menu {
 126  
 127                      .site-logo {
 128                          position: absolute;
 129                          padding-top: calc(0.5 * var(--global--spacing-vertical));
 130                          margin-top: 0;
 131                          top: var(--global--admin-bar--height);
 132  
 133                          .primary-navigation-open & {
 134                              display: none;
 135                          }
 136  
 137                          img {
 138                              max-height: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit)) + 1.7em);
 139                          }
 140                      }
 141                  }
 142              }
 143  
 144              &.has-title-and-tagline {
 145                  align-items: flex-start;
 146  
 147                  &.has-menu {
 148                      justify-content: space-between;
 149  
 150                      .site-branding {
 151                          max-width: calc(100% - 160px);
 152                      }
 153                  }
 154  
 155                  .site-branding {
 156                      margin-right: 0;
 157                  }
 158  
 159                  body:not(.primary-navigation-open) & {
 160  
 161                      &:after {
 162                          display: none;
 163                      }
 164  
 165                      .primary-navigation {
 166                          position: relative;
 167                          top: 0;
 168                      }
 169  
 170                      .menu-button-container {
 171                          position: relative;
 172                          padding-top: 0;
 173                          margin-top: calc(0px - var(--button--padding-vertical) + (0.25 * var(--global--spacing-unit)));
 174  
 175                          #primary-mobile-menu {
 176                              // The 4.5px here is to offset the icon size horizontally
 177                              // (the icon's width is larger than the path's width and has extra space on the sides).
 178                              padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
 179                              padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
 180                              margin-right: calc(0px - var(--global--spacing-horizontal) * 0.6);
 181                          }
 182                      }
 183                  }
 184              }
 185          }
 186  
 187          &:not(.has-logo) {
 188  
 189              &.has-title-and-tagline {
 190  
 191                  .site-branding {
 192                      margin-right: 0;
 193                      max-width: calc(100% - 160px);
 194                  }
 195              }
 196          }
 197  
 198          &:not(.has-menu) {
 199              justify-content: center;
 200          }
 201      }
 202  }