header.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. #header{
  2. position: fixed;
  3. z-index: 999;
  4. .language-selector{
  5. display: flex;
  6. position: fixed;
  7. width: 100px;
  8. left: 50%;
  9. margin-left: -100px;
  10. li{
  11. display: flex;
  12. &:nth-child(-n+2){
  13. &::after{
  14. margin: 0 10px;
  15. display: block;
  16. position: relative;
  17. }
  18. }
  19. }
  20. }
  21. .navigation{
  22. li{
  23. position: fixed;
  24. text-align: center;
  25. &:first-child{
  26. display: none;
  27. }
  28. &:nth-child(2){
  29. bottom: 0;
  30. width: 50%;
  31. }
  32. &:nth-child(3){
  33. top: 0;
  34. width: 50%;
  35. }
  36. &:nth-child(4){
  37. bottom: 0;
  38. width: 50%;
  39. right: 0;
  40. }
  41. &:nth-child(5){
  42. transform: rotate(90deg);
  43. top: 50%;
  44. width: 100%;
  45. right: -50%;
  46. margin-right: 22px;
  47. }
  48. &:nth-child(6){
  49. transform: rotate(-90deg);
  50. top: 50%;
  51. width: 100%;
  52. left: -50%;
  53. margin-left: 22px;
  54. }
  55. &:nth-child(7){
  56. top: 0;
  57. right: 0;
  58. width: 50%;
  59. }
  60. a{
  61. position: relative;
  62. margin: auto;
  63. }
  64. }
  65. }
  66. }