homegrade_theme_production/resources/css/layout/menu-homegrade.css

/* .primary-menu-container { */

.menu-homegrade {
  @apply mx-auto  
    bg-primary
    text-white
    relative
    w-full
    h-fit
    py-4
    px-4
    md:px-0
    xl:px-8 
    2xl:px-32
     my-0;

  /* submenus */
  .sub-menu[open] {
    display: block;
  }
  .sub-menu {
    @apply bg-primary 
       p-6
       mx-auto
       lg:mx-0
       static
       bottom-0
       lg:translate-y-full
       xl:absolute;
    z-index: 999;
    display: none;

    &--closed {
      @apply hidden;
    }
    &--open {
      @apply block;
    }

    li {
      @apply py-2 lg:text-left;
    }

    > a::after {
      transform: translateY(-2px) rotate(-90deg);
      content: '';
      display: inline-block;
      height: 10px;
      width: 10px;
      margin-left: 20px;
      background-image: url('../resources/img/arrow_down_white.svg');
      background-repeat: no-repeat;
      background-size: contain;
      transition: all 0.3s ease-out;
    }
  }
  /* &__wrapper-container {
  } */

  &__navlist {
    @apply w-full
    max-w-screen-2xl mx-auto lg:flex justify-center pr-0;

    /* Highlight using list element */
    li.current-page-parent > a,
    li.current_page_item > a {
      @apply font-medium
       text-white
       decoration-secondary
       underline underline-offset-8;
    }

    li.menu-item {
      @apply font-medium 
        text-center
        rounded-xl;
      button,
      a {
        @apply block
        px-2
        xl:px-4
        py-2;
      }
      &:hover:not(.wpml-ls-item),
      button:focus,
      a:focus {
        @apply cursor-pointer;
        background-color: rgba(255, 255, 255, 0.1);
      }
      button:focus,
      a:focus:not(.wpml-ls-item) {
        @apply rounded-md;
        text-decoration: none;
        outline: 1px solid rgba(255, 255, 255, 0.8);
        outline-offset: 8px;
      }

      /* IF SUBMENU CHILD */
      .menu-item__submenu-toggle {
        &:hover,
        &:focus {
          /* @apply text-secondary; */
        }
        @apply relative pr-4;
        &:after {
          content: '';
          display: inline-block;
          transition: all 0.3s ease-out;
          border-bottom: 2px solid white;
          border-right: 2px solid white;
          height: 10px;
          width: 10px;
          margin-left: 10px;
        }
      }
      .menu-item__submenu-toggle[aria-expanded='false']:after {
        transform: translateY(-20%) rotate(45deg);
      }
      .menu-item__submenu-toggle[aria-expanded='true']:after {
        /* transform: rotate(225deg); */
        transform: translateY(40%) rotate(225deg);
      }
    }
  }
  &__burger-menu-toggle {
    @apply lg:hidden 
      absolute
      right-10
      -translate-y-1/2	
      z-50	
      top-1/2;
    width: 26px;
    height: 26px;

    .menu-toggle-bar {
      @apply top-1/2
        absolute
        block
        right-0
        w-full
        h-[2px]
        /* bg-red-400 */
        bg-white;
      margin-top: -1px;
      transition: all 0.3s ease;

      &.menu-toggle-bar--top {
        transform: translate(0, -7px);
      }
      &.menu-toggle-bar--middle {
      }
      &.menu-toggle-bar--bottom {
        transform: translate(0, 7px);
      }
      .nav-open & {
        @apply bg-secondary;

        &.menu-toggle-bar--top {
          transform: translate(0, 0) rotate(45deg);
        }
        &.menu-toggle-bar--middle {
          opacity: 0;
        }
        &.menu-toggle-bar--bottom {
          transform: translate(0, 0) rotate(-45deg);
        }
      }
    }

    &:hover {
      path {
        @apply fill-secondary;
      }
    }
  }
  @media screen and (max-width: 960px) {
    @apply overflow-hidden;

    &[opened] {
      animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
    }
    &[closing] {
      animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
    }
    &[closed] {
      @apply hidden;
    }
  }
  .wpml-ls-item-nl {
    @apply xl:ml-8;
  }
  .wpml-ls-item {
    @apply px-1;

    a {
      @apply !rounded-full  h-10 w-10 border-2 border-white p-0 !flex justify-center items-center font-semibold text-sm;
      box-sizing: border-box;
    }
  }
  .wpml-ls-current-language {
    a {
      @apply bg-white text-primary font-bold;
    }
  }
}

.menu-homegrade--footer {
  @apply grid sm:grid-cols-2 md:grid-cols-4 gap-y-8 mt-8;

  li.menu-item a {
    @apply hover:text-secondary;
  }

  > li.menu-item > a,
  h6.page-group-title {
    @apply font-bold mb-2 block;
  }
  h6.page-group-title {
    cursor: not-allowed;
    /* order: 1; */
  }

  .sub-menu li {
    @apply block my-1;
  }

  .wpml-ls-menu-item {
    @apply hidden;
  }
}