_header.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. header{
  2. z-index: 999;
  3. position: relative;
  4. @include inlineflex();
  5. justify-content: center;
  6. width: 100%;
  7. nav{
  8. @include inlineflex();
  9. justify-content: space-around;
  10. height: 100px;
  11. width: 70%;
  12. .logo{
  13. display: flex;
  14. a{
  15. display: block;
  16. margin: auto;
  17. }
  18. }
  19. &.dropmenu{
  20. a{
  21. padding: 10px;
  22. }
  23. & > ul{
  24. @include inlineflex();
  25. flex-wrap: nowrap;
  26. & > li{
  27. text-align: center;
  28. max-width: 250px;
  29. margin: auto 20px;
  30. padding: 10px;
  31. border-top: 1px solid $light-blue;
  32. border-bottom: 3px solid $green;
  33. & > ul{
  34. display: none;
  35. margin-top: 10px;
  36. max-width: 250px;
  37. border-bottom: 3px solid $green;
  38. position: absolute;
  39. li{
  40. background-color: white;
  41. text-align: center;
  42. a{
  43. display: block;
  44. padding: 10px;
  45. }
  46. }
  47. }
  48. &:hover{
  49. & > ul{
  50. display: block;
  51. a{
  52. display: block;
  53. }
  54. }
  55. }
  56. }
  57. }
  58. }
  59. .reso{
  60. @include inlineflex;
  61. flex-wrap: nowrap;
  62. a{
  63. display: block;
  64. width: 35px;
  65. margin: auto 5px;
  66. }
  67. }
  68. }
  69. }