Dawn theme: Custom CSS to move logo, cart and menu icons not transferring to other pages

Technical Q&A
,

Topic summary

A user working with Shopify’s Dawn theme encountered an issue where custom CSS positioning for the logo, cart, and menu icons worked on the homepage but failed to apply consistently on product pages, specifically on mobile devices.

The Problem:

  • Custom CSS successfully repositioned header elements on the homepage
  • On mobile product pages, the header__heading element still displayed despite CSS attempting to hide it
  • Desktop versions worked correctly; issue was mobile-specific

The Solution:
The user resolved the issue independently by correcting their CSS selectors. The original code referenced .header__heading and .header__heading-logo-wrap, but the proper fix required targeting both classes together to ensure consistent styling across all pages.

Note: The provided CSS code appears corrupted or reversed in the original post, making specific implementation details unclear.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

I’ve been using some custom CSS to move my logo, cart and menu icons to the position I want them to be in, but when I go to a product page they are in different places, is there a way to make sure this affects the entire site? Is there something i’m doing wrong? I’m using the dawn theme.

Cheers

/* Styles for laptop or larger screens */
@media screen and (min-width: 992px) {
  .header__heading-logo-wrapper {
    position: relative;
    top: 10px;
  }
  .header__icon--cart {
    position: relative;
    top: 9px;
  }
} 
/* Styles for mobile devices */
@media screen and (max-width: 991px) {
  .header__heading {
    display: none;
  }
  .header__icon--cart {
    position: relative;
    top: -5px;
  }
  .header__icon--menu {
    position: relative;
    top: -5px;
  }
  .header {
    margin-bottom: -12px;
  }
}
2

Sorry forgot to mention this only happens on mobile, the header__heading still displays on product pages but not on the home page.

3

I sorted it, my code was referencing .header__heading and needed to reference .header__heading-logo-wrapper