_header.scss 1.5 KB

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