Changing menu breakpoints Minimal Theme

DanDG
New Member
2 0 0

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-S... 

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

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

 

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

0 Likes
JHKCreate
Shopify Partner
2567 433 626

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

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
- Learn more about us: jhkcreate.com

0 Likes
DanDG
New Member
2 0 0

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. 

0 Likes
JHKCreate
Shopify Partner
2567 433 626

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.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
- Learn more about us: jhkcreate.com