_header.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. #header {
  2. width: 100%;
  3. height: $header-height-large;
  4. border-bottom: 1px solid rgba($gray-color, 0.2);
  5. @extend .default-animation;
  6. font-size: 0.7rem;
  7. font-weight: 700;
  8. background: $light-color;
  9. color: $dark-color;
  10. a {
  11. color: $dark-color;
  12. }
  13. .logo svg path {
  14. fill: $header-color-dark;
  15. }
  16. .header-dark &:not(.scrolled) {
  17. background: $header-color-dark;
  18. color: $light-color;
  19. a {
  20. color: rgba($light-color, 0.7) !important;
  21. }
  22. a.active {
  23. color: $light-color !important;
  24. }
  25. .dropmenu ul ul a {
  26. color: $dark-color !important;
  27. }
  28. .logo svg path {
  29. fill: $light-color;
  30. }
  31. }
  32. .header-dark.header-transparent &:not(.scrolled) {
  33. background: rgba(#000, 0.05);
  34. }
  35. .header-transparent &:not(.scrolled) {
  36. background: rgba(#fff, 0.05);
  37. //border-bottom: 0 !important;
  38. }
  39. .navbar-section {
  40. height: $header-height-large;
  41. @extend .default-animation;
  42. @include breakpoint(md) {
  43. margin-right: 2rem;
  44. }
  45. }
  46. .navbar-section.desktop-menu {
  47. @include breakpoint(md) {
  48. display: none;
  49. }
  50. }
  51. .logo {
  52. svg, img {
  53. height: 42px;
  54. display: inherit;
  55. @extend .default-animation;
  56. }
  57. }
  58. // Fixed Header solution
  59. .header-fixed & {
  60. position: fixed;
  61. top: 0;
  62. z-index: 2;
  63. }
  64. }
  65. // Animate Fixed Header
  66. body.header-fixed.header-animated {
  67. #header.scrolled {
  68. height: $header-height-small;
  69. .navbar-section {
  70. height: $header-height-small;
  71. }
  72. .logo {
  73. svg, img {
  74. height: 28px;
  75. }
  76. }
  77. ~ .mobile-menu .button_container {
  78. top: 0.5rem;
  79. }
  80. }
  81. }
  82. .login-status-wrapper {
  83. white-space: nowrap;
  84. }