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

Store Design
,

Topic summary

A user wants to reposition their store logo to the left side of the sticky header when users scroll down the page in the Dawn theme.

Proposed Solution:

  • A CSS-based approach was provided (not JavaScript as initially expected)
  • The solution targets screens wider than 991px
  • Code modifications involve:
    • Hiding the search modal in sticky header
    • Adjusting grid template areas to reposition elements
    • Making the header heading full-width and flex-displayed

Implementation Steps:

  1. Navigate to Shopify Admin → Online Store → Themes
  2. Edit code of the live theme
  3. Locate base.css file
  4. Add the provided CSS code snippet at the end
  5. Save changes

Status: The responder offered further customization if needed, requesting the store URL and password for additional assistance. The issue appears solvable but awaits confirmation of whether the solution worked.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
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?

I think this can be done using a javascript function, either way any help is much appreciated!

Thank you :slightly_smiling_face:

2

Hello @justauser

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media only screen and (min-width: 991px) {
  .shopify-section-header-sticky details-modal.header__search {
    display: none;
}


.shopify-section-header-sticky.scrolled-past-header header.header{
   grid-template-areas:"heading icons icons"
        "navigation navigation navigation";
}


.shopify-section-header-sticky.scrolled-past-header header.header .header__heading {
    display: flex;
    width: 100%;
}
}

If you still need any changes . So please share your store URL and Password.

Please hit Like and Mark it as a Solution if you find our reply helpful.