Untitled

 avatar
unknown
plain_text
5 months ago
1.3 kB
2
Indexable
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 2rem;
  width: 100%;
  color: #fff;
}




nav a {
  margin: 0 2rem;
  color: #fff;
  text-decoration: none;
}

header .nav-btn {
  padding: 5px;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  visibility: hidden; /* Hidden by default */
  opacity: 0; /* Hidden by default */
  font-size: 1.8rem;
}

header .talk-btn {
  background-color: blueviolet;
  border-radius: 35px;
  width: 120px;
  height: 50px;
  color: white;
  border: none; /* Remove border */
  margin-left: 150px;
}

@media only screen and (max-width: 1024px) {
  header .nav-btn {
      visibility: visible; /* Visible on mobile */
      opacity: 1; /* Visible on mobile */
  }

  header nav {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      
      transition: 1s;
      transform: translateY(-100vh);
  }

  header .responsive_nav {
     transform: none;
  }

nav .nav-close-btn{
  position: absolute;
  top:2rem;
  right: 2rem;
}

nav a{
  font-size: 1.5rem;
}

}
Editor is loading...
Leave a Comment