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;
        }
      }

      .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;

              a {
                color: $green;
                font-size: 50px;
                line-height: 50px;

                &:hover {
                  color: $yellow;
                }
              }

              &.contact {
                margin-bottom: 5%;

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

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

        .col-logo {
          .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;

    .navbar-brand {
      width: 50%;

      img {
        max-height: 85px;
      }
    }

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

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

    .space-collab {
      color: $yellow;
      font-size: 22px;
      font-family: FranklinGothic;

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

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