site-header.css

Same filename in other branches
  1. 9 core/themes/olivero/css/components/site-header.css
  2. 11.x core/themes/olivero/css/components/site-header.css

Site header.

File

core/themes/olivero/css/components/site-header.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Site header.
  10. */
  11. .site-header {
  12. position: relative;
  13. /**
  14. * Ensure mobile site header is always above other elements including
  15. * contextual links, and Tour.
  16. */
  17. z-index: 101;
  18. }
  19. @media (min-width: 75rem) {
  20. .site-header {
  21. /* Necessary to keep the content from jumping up when header transitions to fixed. */
  22. min-height: var(--site-header-height-wide);
  23. border-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */
  24. }
  25. }
  26. .site-header__initial {
  27. position: relative;
  28. z-index: 102;
  29. display: flex;
  30. align-items: flex-end;
  31. align-self: stretch;
  32. background-color: var(--color--primary-50);
  33. }
  34. .site-header__fixable {
  35. display: flex;
  36. align-items: flex-end;
  37. transition: all 0.5s;
  38. }
  39. @media (min-width: 75rem) {
  40. .site-header__fixable.is-fixed:not(.is-expanded) {
  41. pointer-events: none;
  42. }
  43. }
  44. @media (min-width: 75rem) {
  45. body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
  46. position: fixed;
  47. z-index: 102; /* Appear above body content that is position: relative */
  48. inset-block-start: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4));
  49. max-width: var(--max-bg-color);
  50. }
  51. }
  52. .site-header__inner {
  53. position: relative;
  54. z-index: 1; /* Appear in front of Drupal's tabs. */
  55. flex-grow: 1;
  56. width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
  57. background: var(--color--white);
  58. }
  59. /*
  60. * Only apply transition styles when JS is loaded. This
  61. * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
  62. */
  63. @media (min-width: 75rem) {
  64. html.js body:not(.is-always-mobile-nav) .site-header__inner {
  65. transition:
  66. opacity 0.3s,
  67. transform 0.3s,
  68. box-shadow 0.3s;
  69. }
  70. }
  71. @media (min-width: 75rem) {
  72. .site-header__fixable.is-expanded .site-header__inner {
  73. box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
  74. }
  75. }
  76. @media (min-width: 75rem) {
  77. [dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {
  78. box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
  79. }
  80. }
  81. /* Hide the desktop nav when it's fixed and not active. */
  82. @media (min-width: 75rem) {
  83. body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
  84. transform: translateX(-101%); /* LTR */
  85. opacity: 0;
  86. }
  87. }
  88. @media (min-width: 75rem) {
  89. [dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
  90. transform: translateX(101%);
  91. }
  92. }
  93. .site-header__inner__container {
  94. display: flex;
  95. justify-content: space-between;
  96. }
  97. /* Reset width set by layout.css */
  98. body.is-fixed .site-header__inner__container {
  99. width: auto;
  100. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.