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