Minor Glitch in Horizon Theme Editor (SUGGESTION TO FIX)

Technical Q&A
1

Hi, I hope you’re well.

I wanted to just share a slight glitch that happens when editing the horizon theme. When switching between desktop and mobile, the menu changes to the mobile menu, even when I revert to desktop view (until I refresh the page by clicking the website logo).

Please see screen recording: https://drive.google.com/file/d/1W3Y1tAjyyv7-XUz95aiykfRgW2po91Kq/view?usp=sharing

I also wanted to request that the team add the option to adjust the spacing around the logo in the header for mobile. Currently, there is only the option to adjust spacing for the desktop logo.

Thanks so much,

Asa (3rdday.co.uk)

2

@3rdDay Hey, thanks for posting here.
It’s fine on my side, think this glitch presents when you allow to country/currency selector app in the header.

image
image452×522 76.8 KB

3

I experience the same. I notice that the class ‘desktop:hidden is not added, which is added in #updateMenuVisibility. So it seems the javascript code crashed (maybe)

Rgds,

Dirk

4

Hi Asa,

This behavior actually happens only inside the Theme Editor, not on the live store. When you switch between desktop and mobile views in the editor, Shopify doesn’t always re-apply the responsive “hidden” classes in real time. Because of that, the mobile menu can stay visible even after switching back to desktop view until you refresh the page.

On the live site, the JavaScript checks your screen size on page load and correctly hides or shows the menus, so it’s not a theme bug.

However, if you also want to make sure the mobile side drawer never appears on desktop, you can force-hide it with CSS:

@media screen and (min-width: 768px) {
  .header__drawer {
    display: none !important;
  }
}

Let me know if you need help locating where to add the CSS.

Regards,
Ahsan