Change header breakpoint for Heritage theme

Technical Q&A
,
1

Hi.

I’m using the new Shopify “Heritage” theme, but I need to change the screen width at which the header section changes from desktop mode to mobile mode. The theme default is that the header’s mobile mode is displayed at screen widths of 749px and below, and the header’s desktop mode is displayed at screen widths of 750px and above. I’d like to change this breakpoint to 799px / 800px.

This theme seems quite limited in terms of its inbuilt customisability, and I can’t find any theme option to change this breakpoint. I’ve made an initial attempt to find out where in the theme files this breakpoint is defined, but it doesn’t seem to be as simple as just a CSS media query that changes the layout. (Unless I’m missing something obvious). At first glance, it seems to be controlled by a mixture of CSS, liquid and javascript spread across more than one theme file.

Before I go ahead and do a time-consuming deep dive to try to understand how the theme controls the layout of the header’s mobile and desktop modes, I was wondering if anyone else has already been on this journey and found a solution to changing the breakpoint. If so, I’d be very grateful if you could give me some pointers explaining how to do this.

Thanks in advance,
Mathew

2

Hi,

Hope this will help

  • Search theme for 749, 750, max-width, min-width, matchMedia, innerWidth.

  • Edit CSS max-width: 749px → 799px, and min-width: 750px → 800px.

  • Edit JS checks <= 749 → <= 799 or (max-width: 749px) → (max-width: 799px).

  • Add CSS override + small JS listener if needed.

/* Force mobile header at <=799px */
@media screen and (max-width: 799px) {
  /* example classes — inspect your header and replace these with the real classes */
  .header--desktop { display: none !important; }
  .header--mobile  { display: block !important; }
}

/* Ensure desktop shows at >=800px */
@media screen and (min-width: 800px) {
  .header--desktop { display: block !important; }
  .header--mobile  { display: none !important; }
}


(function(){
  const MOBILE_MAX = 799;
  const mq = window.matchMedia(`(max-width: ${MOBILE_MAX}px)`);

  function onChange(e) {
    // call or re-init header JS that moves or toggles menus
    // e.g., if your theme exposes ThemeHeader.init() replace with the real function
    if (typeof window.ThemeHeader !== 'undefined' && window.ThemeHeader.reinit) {
      window.ThemeHeader.reinit();
    }
  }
  mq.addEventListener ? mq.addEventListener('change', onChange) : mq.addListener(onChange);
  onChange(mq);
})();
3

Hi. Thanks for your reply! I won’t be working on this project again for a few days, but when I do, I’ll take a proper look at your suggestions and let you know how I get on.

4

Hi @Tay23,

You can replace all it:

Screenshot
Screenshot1078×484 55.8 KB

If I helped you, then a Like would be truly appreciated.