ActesCitoyens/assets/app/frontend/scss/header.scss

#menu {
  .menu-content {
    background-color: #FFF;
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 100;
    top: 0;
    left: 0;

    .row-menu {
      height: 100%;

      .row-toggle {
        height: 12%;

        .toggle {
          position: absolute;
          right: 0;
          top: 2%;
          border: 0;
          background-color: #FFF;
          z-index: 100;

          @include mobile-only {
            width: 100px;
          }
        }
      }

      .row-list {
        height: 88%;

        nav {
          ul {
            height: 100%;
            margin: 0;

            li {
              width: 100%;
              padding-left: 20%;
              padding-right: 15%;
              margin-bottom: 6%;
              display: inline-block;

              @include mobile-only {
                padding: 0;
              }

              a {
                color: $green;
                font-size: 5.0rem;
                line-height: 5.0rem;

                @include mobile-only {
                  font-size: 4.0rem;
                }

                &:hover {
                  color: $yellow;
                }
              }

              &.contact {
                margin-bottom: 5%;

                a {
                  border: 2px solid $yellow;
                  padding: 10px 45px;
                  font-size: 2.5rem;
                }
              }

              .yellow-trait {
                width: 20%;
                height: 10px;
                position: absolute;
                top: 0;
                right: 0;
                background-color: $yellow;

                @include mobile-only {
                  right: 30%;
                }
              }
            }
          }
        }

        .col-logo {
          @include mobile-only {
            display: none;
          }

          .logo {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            left: 50%;
            width: 50%;
          }
        }
      }
    }
  }

  .menu-fixed {
    background-color: #FFF;
    height: $headerheight;
    z-index: 2;
    border-bottom: 1px solid lightgrey;

    @include mobile-only {
      height: 80px;
    }

    .navbar-brand {
      width: 45%;

      @include large-only {
        width: 30%;
      }

      img {
        max-height: 80px;
      }
    }

    .participate {
      font-size: 3.0rem;
      color: #568b6f;
      font-family: dinbold;
      border: 2px solid #568b6f;
      padding: 8px 10px;
      font-weight: bold;

      @include mobile-only {
        display: none;
      }

      &:hover {
        text-decoration: none;
        border-color: $yellow;
      }
    }

    .space-collab {
      color: $yellow;
      font-size: 2.2rem;
      font-family: FranklinGothic;

      @include desktop-only {
        display: none;
      }

      img {
        height: 50px;
        margin-right: 10px;
      }
    }

    .toggle {
      border: 0;
      background-color: #FFF;

      img {
        max-width: 140px;

        @include mobile-only {
          max-width: 80px;
        }
      }
    }
  }
}