How can I change the mobile menu breakpoint in Minimal Theme?

Technical Q&A
1

Dear Sir or Madam,

I’m making my site using the free theme of “minimal”
https://themes.shopify.com/themes/minimal/styles/fashion

I have the problem that it says “mobile menu breakpoint”.

By default, It seems that mobile menus appear when viewing the site smaller than 768px.
I’d like to change the breakpoint so that my site only uses the mobile menu. As it will declutter the site and simplify navigation.

I searched some articles on the Shopify Community. But I couldn’t get to the answer.

https://community.shopify.com/c/Shopify-Design/How-to-Fix-Hamburger-Menu-in-Brooklyn-Theme-for-Big-Screens-like/m-p/304849#comment-395950

https://community.shopify.com/c/Shopify-Design/Changing-breakpoint-for-mobile-menu/m-p/468853#M121993

https://community.shopify.com/c/Shopify-Design/Change-breakpoint-for-tablets-in-Debut-Theme/m-p/296892#M77623

What can we do to resolve this?
I look forward to your reply.

2

Hello,

You can do it by increasing the breakpoint value in code

We can assist in that if you need to, not a problem.

Best

3

Hi Community,

Appreciate the reply JHKCreate

As it turns out, I was able to resolve this issue myself. I continued looking around and knew it had to do with breakpoints or @media triggers.

Solution:

Here’s the way to keep the mobile navigation active on all devices using the minimal template.

Open the Assets → timber.scss.liquid file using a code editor. Look for $medium: 768px and $large: 769px. LIne 224, 225 in the Shopify editor.

Change both of these to 3000px.

That’s it!

Disclaimer: I didn’t fully test the change but my preliminary review of the site I’m working on all seems to be working correctly.

Good luck.

4

Well that works but in that case you’re changing the general breakpoint whereas you could have just increased the slider to 3,000px for example just for the menu and kept everything as it should.

Your approach might work, but it will cause issues down the line in that case. I suggest you find the header breakpoint setting and just increase the “Max” value and that’s all.

1 Like