_header.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. header{
  2. position: fixed;
  3. width: 100%;
  4. height: 50px;
  5. top: 0;
  6. padding: 0 20px;
  7. display: flex;
  8. justify-content: space-between;
  9. background-color: white;
  10. border-bottom: 2px solid rgb(0,0,0);
  11. z-index: 999;
  12. h1{
  13. margin: auto 0;
  14. }
  15. nav{
  16. margin: auto 0;
  17. & > ul:nth-child(1) {
  18. & > li:nth-child(1){
  19. display: flex;
  20. position: relative;
  21. margin-right: 80px;
  22. &:after{
  23. content: " ";
  24. cursor: pointer;
  25. display: block;
  26. width: 15px;
  27. height: 20px;
  28. background-image: url(../images/fleche.svg);
  29. background-size: contain;
  30. position: absolute;
  31. right: -25px;
  32. transform: rotate(0deg);
  33. transition: all 0.5s;
  34. }
  35. &.hover{
  36. &:after{
  37. transform: rotate(180deg)!important;
  38. transition: all 0.5s;
  39. }
  40. }
  41. }
  42. }
  43. }
  44. ul{
  45. display: flex;
  46. li{
  47. height: 50px;
  48. margin-right: 50px;
  49. align-items: center;
  50. display: flex;
  51. }
  52. }
  53. ul.tags{
  54. display: none;
  55. }
  56. ul.visible, ul.active{
  57. display: flex;
  58. position: absolute;
  59. top: 50px;
  60. right: 0px;
  61. width: auto;
  62. border-left: 2px solid black;
  63. border-bottom: 2px solid black;
  64. z-index: 999;
  65. background: white;
  66. a{
  67. display: flex;
  68. width: auto;
  69. height: 50px;
  70. margin: 0 20px;
  71. li{
  72. margin: auto;
  73. }
  74. }
  75. }
  76. }