Skip to main content

Center justify Logo (Resposive) 

/* HEADER FLEX LAYOUT */
.amplify-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
}

/* LOGO AREA */
.amplify-header h1 {
  flex: 1 1 100%;
  text-align: center;
  margin: 0.5rem 0;
}

.amplify-header h1 img {
  max-width: 250px;
  height: auto;
  display: inline-block;
}

/* RIGHT SIDE (Contact, Search, etc.) */
.amplify-header nav {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -2.5rem; /* Pull it up to share space with logo on wide screens */
}

/* Responsive stack on mobile */
@media (max-width: 768px) {
  .amplify-header nav {
    margin-top: 0;
    justify-content: center;
  }
}
 .amplify-header .container h1 img {
      height: auto;
      width: 170px;
}
</style>