Moving logo all the way to the left and other symbols on the right (mobile) horizon shopify

Store Design
21

Nope, you can do it centrally, just add:

  --header-mobile-bookend: 40px;

to my code, like this:

@media screen and (max-width: 749px) {
  .header__columns {
    --header-template-columns: 1fr var(--header-mobile-bookend) var(--header-mobile-bookend) var(--header-mobile-bookend) var(--header-mobile-bookend);
    --header-mobile-bookend: 40px; /* default is 44px */
    grid-template-areas: "center leftA leftB rightA rightB";
  }

  .header__columns .header-logo {
    justify-content: flex-start;
    padding: 0 1rem;
  }
}

But fat fingers!

1 Like