_header.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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. .logo {
  47. svg, img {
  48. height: 42px;
  49. display: inherit;
  50. @extend .default-animation;
  51. }
  52. }
  53. // Fixed Header solution
  54. .header-fixed & {
  55. position: fixed;
  56. top: 0;
  57. z-index: 2;
  58. }
  59. }
  60. // Animate Fixed Header
  61. body.header-fixed.header-animated {
  62. #header.scrolled {
  63. height: $header-height-small;
  64. .navbar-section {
  65. height: $header-height-small;
  66. }
  67. .logo {
  68. svg, img {
  69. height: 28px;
  70. }
  71. }
  72. ~ .mobile-menu .button_container {
  73. top: 0.5rem;
  74. }
  75. }
  76. }
  77. .login-status-wrapper {
  78. white-space: nowrap;
  79. }