_header.scss 933 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /*--------------------------------------------------------------
  2. # Header
  3. --------------------------------------------------------------*/
  4. #header {
  5. transition: all 0.5s;
  6. z-index: 997;
  7. transition: all 0.5s;
  8. padding: 24px 0;
  9. background: rgba($primary, 0.8);
  10. &.header-transparent {
  11. background: transparent;
  12. }
  13. &.header-scrolled {
  14. background: rgba(darken($primary, 15), 0.9);
  15. padding: 12px;
  16. }
  17. .logo {
  18. h1 {
  19. font-size: 24px;
  20. margin: 0;
  21. line-height: 1;
  22. font-weight: 700;
  23. letter-spacing: 1px;
  24. font-family: $font-secondary;
  25. text-transform: uppercase;
  26. }
  27. h1 a, h1 a:hover {
  28. color: #fff;
  29. text-decoration: none;
  30. }
  31. img {
  32. padding: 0;
  33. margin: 0;
  34. max-height: 40px;
  35. }
  36. }
  37. @media (max-width: 768px) {
  38. &.header-scrolled {
  39. padding: 15px 0;
  40. }
  41. }
  42. }