menu-main.css

Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
  2. 10 core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
  3. 11.x core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css

This file is used to style the main menu.

File

core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css

View source
  1. /**
  2. * @file
  3. * This file is used to style the main menu.
  4. */
  5. .menu-main {
  6. overflow: hidden;
  7. max-height: 0;
  8. margin: 0;
  9. padding: 0;
  10. list-style-type: none;
  11. transition: max-height 0.5s ease-in;
  12. color: #000;
  13. font-family: "Scope One", Georgia, serif;
  14. font-size: 1.266rem;
  15. font-weight: 400;
  16. line-height: 1.2;
  17. }
  18. .menu-main--active {
  19. overflow-y: auto;
  20. /**
  21. * An exact max-height value must be set to make possible to animate the menu display.
  22. * It my not be much larger than the content because that would break the animation.
  23. * See: https://css-tricks.com/using-css-transitions-auto-dimensions/
  24. */
  25. max-height: 18.75rem;
  26. }
  27. .menu-main-toggle {
  28. width: 41px;
  29. height: 41px;
  30. margin-right: -9px;
  31. /* the padding, margin & transparent border means the hamburger doesn't move on focus/hover */
  32. padding: 0 6px;
  33. text-align: left;
  34. border: 3px solid transparent;
  35. border-radius: 0;
  36. background-color: transparent;
  37. line-height: 1;
  38. }
  39. .menu-main-toggle:hover {
  40. background-color: transparent;
  41. }
  42. .menu-main-toggle svg {
  43. display: block;
  44. }
  45. .menu-main__item {
  46. margin-top: 0.8em;
  47. text-align: center;
  48. }
  49. .menu-main__link {
  50. display: inline-block;
  51. /* Margin required for focus outlines. */
  52. margin: 5px 3px;
  53. padding-bottom: 0.15em;
  54. transition: all 0.2s;
  55. text-decoration: none;
  56. color: inherit;
  57. border-bottom: solid 0.15em transparent;
  58. background-color: inherit;
  59. }
  60. .menu-main__link:hover,
  61. .menu-main__link.is-active:hover,
  62. .menu-main__link:focus {
  63. text-decoration: none;
  64. color: #da3c13;
  65. border-bottom-color: #da3c13;
  66. background-color: inherit;
  67. }
  68. .menu-main__link:active,
  69. .menu-main__link.is-active {
  70. text-decoration: none;
  71. border-bottom-color: #da3c13;
  72. }
  73. @media screen and (min-width: 48em) {
  74. .menu-main {
  75. display: flex;
  76. overflow: auto;
  77. flex-wrap: wrap;
  78. justify-content: flex-end;
  79. max-height: none;
  80. }
  81. .menu-main-toggle {
  82. display: none;
  83. }
  84. .menu-main__item {
  85. margin-top: 0;
  86. margin-bottom: 0;
  87. }
  88. .menu-main__item + .menu-main__item {
  89. margin-left: 2.5em; /* LTR */
  90. }
  91. [dir="rtl"] .menu-main__item + .menu-main__item {
  92. margin-right: 2.5em;
  93. margin-left: 0;
  94. }
  95. }
  96. @media screen and (min-width: 48em) {
  97. .menu-main-togglewrap {
  98. display: none;
  99. }
  100. }
  101. .menu-main__wrapper {
  102. flex: 0 1 100%;
  103. text-align: center;
  104. }
  105. @media screen and (min-width: 48em) {
  106. .menu-main__wrapper {
  107. flex-basis: calc(100% - 220px);
  108. flex-grow: 0;
  109. flex-shrink: 1;
  110. text-align: right;
  111. }
  112. }
  113. @media screen and (min-width: 48em) {
  114. .menu-main {
  115. display: flex;
  116. justify-content: flex-end;
  117. }
  118. }

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