TIF_E41200642/public/landingpage/scss/layouts/_header.scss

// ----------------------------------------------
// Header Style
// ----------------------------------------------


.header {
  position: sticky;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;

  background-color: $white;
  transition: all 0.5s ease-in-out;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;

  &.header.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: rgb(0 0 0 / 5%) 0px 9px 17.5px;
  }

  .navbar {
    min-height: 80px;

    .navbar-collapse {
      .navbar-nav {
        .nav-item {

          .nav-link {
            line-height: 28px;
            padding: 5px 15px;
            border-radius: 7px;
            font-size: 16px;
            color: $dark;
            display: flex;
            align-items: center;
            position: relative;
            transition: all .3s ease-in-out;
            font-weight: $font-weight-normal;

            &:hover {
              color: $primary;
              background-color: rgba(42, 53, 71, 0.02);
            }
          }
        }

        .dropdown-toggle::after {
          display: none;
        }
      }
    }
  }
}


.navbar-nav {
  .hover-dd {
    position: static;

    &:hover {
      .dropdown-menu {
        display: block;

        li {
          line-height: normal;
        }

      }
    }
  }

  .mega-dropdown {
    position: static;

    &.pages-dropdown {
      &:hover {
        .dropdown-menu {
          max-width: 910px !important;
        }
      }
    }

    &:hover {
      .dropdown-menu {
        left: 0;
        width: 100%;
        max-width: 1170px;
        margin: 0 auto;
        right: 0;

        .lp-demos-box {
          .lp-demos-btn {
            opacity: 0;
          }

          &:hover {
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgb(55 114 255 / 20%);
            }

            .lp-demos-btn {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}



@-webkit-keyframes animation-dropdown-menu-move-up-scroll {
  from {
    top: 71px;
  }

  to {
    top: 70px;
  }
}

@keyframes animation-dropdown-menu-move-up-scroll {
  from {
    top: 71px;
  }

  to {
    top: 70px;
  }
}

@-webkit-keyframes animation-dropdown-menu-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes animation-dropdown-menu-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dropdown-menu-animate-up {
  -webkit-animation: animation-dropdown-menu-fade-in 0.5s ease 1, animation-dropdown-menu-move-up 0.5s ease-out 1;
  animation: animation-dropdown-menu-fade-in 0.5s ease 1, animation-dropdown-menu-move-up 0.5s ease-out 1;
}