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. 8.9.x 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. margin: 0;
  7. padding: 0;
  8. list-style-type: none;
  9. color: #000;
  10. font-family: "Scope One", Georgia, serif;
  11. font-size: 1.266rem;
  12. font-weight: 400;
  13. line-height: 1.2;
  14. }
  15. .menu-main__item {
  16. margin-top: 0.8em;
  17. text-align: center;
  18. }
  19. .menu-main__link {
  20. display: inline-block;
  21. /* Margin required for focus outlines. */
  22. margin: 5px 3px;
  23. padding-bottom: 0.15em;
  24. transition: all 0.2s;
  25. text-decoration: none;
  26. color: inherit;
  27. border-bottom: solid 0.15em transparent;
  28. background-color: inherit;
  29. }
  30. .menu-main__link:hover,
  31. .menu-main__link.is-active:hover,
  32. .menu-main__link:focus {
  33. text-decoration: none;
  34. color: #da3c13;
  35. border-bottom-color: #da3c13;
  36. background-color: inherit;
  37. }
  38. .menu-main__link:active,
  39. .menu-main__link.is-active {
  40. text-decoration: none;
  41. border-bottom-color: #da3c13;
  42. }
  43. @media screen and (min-width: 48em) {
  44. .menu-main {
  45. display: flex;
  46. flex-wrap: wrap;
  47. justify-content: flex-end;
  48. }
  49. .menu-main__item {
  50. margin-top: 0;
  51. margin-bottom: 0;
  52. }
  53. .menu-main__item + .menu-main__item {
  54. margin-left: 2.5em; /* LTR */
  55. }
  56. [dir="rtl"] .menu-main__item + .menu-main__item {
  57. margin-right: 2.5em;
  58. margin-left: 0;
  59. }
  60. }
  61. .menu-main__wrapper {
  62. flex: 0 1 100%;
  63. text-align: center;
  64. }
  65. @media screen and (min-width: 48em) {
  66. .menu-main__wrapper {
  67. flex-basis: calc(100% - 220px);
  68. flex-grow: 0;
  69. flex-shrink: 1;
  70. text-align: right;
  71. }
  72. }
  73. @media screen and (min-width: 48em) {
  74. .menu-main {
  75. display: flex;
  76. justify-content: flex-end;
  77. }
  78. }

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