_navigation-top.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. .main-navigation {
  2. clear: both;
  3. display: block;
  4. @include font-size(.875);
  5. font-weight: bold;
  6. padding: .8em 0 1.6em;
  7. text-align: left;
  8. text-transform: uppercase;
  9. width: 100%;
  10. @include clearfix;
  11. ul {
  12. display: none;
  13. list-style: none;
  14. margin: 0;
  15. padding: 0;
  16. }
  17. li {
  18. border-top: 1px solid $color__background-hr;
  19. position: relative;
  20. list-style: none;
  21. &:hover > a,
  22. &.focus > a {
  23. }
  24. li a {
  25. padding-left: 1.6em;
  26. }
  27. li li a {
  28. padding-left: 3.2em;
  29. }
  30. li li li a {
  31. padding-left: 4.8em;
  32. }
  33. li li li li a {
  34. padding-left: 5.4em;
  35. }
  36. }
  37. a,
  38. a:visited {
  39. color: $color__text-main;
  40. display: block;
  41. padding: .8em .4em;
  42. text-decoration: none;
  43. &:hover,
  44. &:focus {
  45. color: $color__text-main;
  46. opacity: 0.5;
  47. }
  48. }
  49. .current_page_item > a,
  50. .current-menu-item > a,
  51. .current_page_ancestor > a,
  52. .current-menu-ancestor > a {
  53. color: $color__text-main;
  54. opacity: 0.5;
  55. }
  56. }
  57. /* Small menu. */
  58. .main-navigation.toggled ul {
  59. display: block;
  60. }
  61. .menu-toggle {
  62. display: inline-block;
  63. margin: .8em auto;
  64. position: relative;
  65. left: 50%;
  66. -webkit-transform: translateX(-50%);
  67. transform: translateX(-50%);
  68. text-align: center;
  69. }
  70. .main-navigation .genericon-menu {
  71. display: inline-block;
  72. margin-right: 5px;
  73. }