header.css

Same filename in this branch
  1. 9 core/themes/bartik/css/components/header.css
Same filename in other branches
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
  2. 8.9.x core/themes/bartik/css/components/header.css
  3. 10 core/profiles/demo_umami/themes/umami/components/header/header.css
  4. 10 core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
  5. 11.x core/profiles/demo_umami/themes/umami/components/header/header.css
  6. 11.x core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css

This file is used to style the header.

It styles the header as a global component; it does not style individual header items, such as a menu, which are styled by their own CSS files.

File

core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css

View source
  1. /**
  2. * @file
  3. * This file is used to style the header.
  4. *
  5. * It styles the header as a global component; it does not style individual
  6. * header items, such as a menu, which are styled by their own CSS files.
  7. */
  8. .layout-header {
  9. padding: 0;
  10. background: #fff;
  11. }
  12. .region-header {
  13. display: flex;
  14. flex-wrap: wrap;
  15. align-items: center;
  16. justify-content: space-between;
  17. padding: 0.75rem 4%;
  18. }
  19. @media screen and (min-width: 48em) {
  20. .region-header {
  21. padding-top: 0;
  22. }
  23. }
  24. /* Medium */
  25. @media screen and (min-width: 48rem) { /* 768px */
  26. .region-header {
  27. padding-top: 0;
  28. }
  29. }
  30. /* Extra large + side margins */
  31. @media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
  32. .region-header {
  33. padding: 0;
  34. }
  35. }

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