_header.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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. &> li{
  26. height: 3em; /* hauteur du parent */
  27. line-height: 2.5em; /* hauteur de ligne (identique) */
  28. white-space: nowrap; /* interdiction de passer à la ligne */
  29. margin: auto 20px;
  30. border-top: 1px solid $light-blue;
  31. border-bottom: 3px solid $green;
  32. & > ul{
  33. display: none;
  34. border-bottom: 3px solid $green;
  35. }
  36. &:hover{
  37. & > ul{
  38. display: block;
  39. a{
  40. display: block;
  41. height: 50px;
  42. background: white;
  43. padding: 10px;
  44. }
  45. }
  46. }
  47. }
  48. }
  49. }
  50. .reso{
  51. @include inlineflex;
  52. flex-wrap: nowrap;
  53. a{
  54. display: block;
  55. width: 35px;
  56. margin: auto 5px;
  57. }
  58. }
  59. }
  60. }