Move Logo To The Left Side In Sticky Header During Scrolling In Dawn Theme

Store Design
, , , , ,
1

I want my logo to move to the left side when the permanent sticky header is active, when the user scrolls down as shown in the video below I want my logo to be placed on the left side in the highlighted area,

How can I achieve this?

Thank you, any help would be much appreciated

1 Like
2

Hello @ninis

Please follow the steps below after logging into the Shopify admin

  1. Go to your Shopify Admin panel.
  2. Click on Online Store > Themes.
  3. Find the live theme and then click Actions > Edit code.
  4. Search base.css.
  5. Scroll to the bottom of base.css.
  6. Code :-
@media only screen and (min-width: 1024px) {
  /* Hide search modal in sticky header */
  .shopify-section-header-sticky details-modal.header__search {
    display: none;
  }

  /* Change header grid layout when scrolled */
  .shopify-section-header-sticky.scrolled-past-header header.header {
    display: grid;
    grid-template-areas:
      "logo icons icons"
      "navigation navigation navigation";
    align-items: center;
  }

  /* Logo alignment */
  .shopify-section-header-sticky.scrolled-past-header header.header .header__heading {
    grid-area: logo;
    justify-content: flex-start; /* Move logo to left */
    display: flex;
    width: auto; /* Adjust width to content */
  }

  /* Icons alignment */
  .shopify-section-header-sticky.scrolled-past-header header.header .header__icons {
    grid-area: icons;
    justify-content: flex-end;
    display: flex;
  }

  /* Navigation full width */
  .shopify-section-header-sticky.scrolled-past-header header.header .header__inline-menu {
    grid-area: navigation;
  }
}
  1. Save the changes.
3

Hi @ninis

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

4

How long have you been facing this issues ? and have you see any means to solve it ?