How do you change the breakpoint at which mobile menu appears in Magento 2?
1
-
this link may help.– Milan ChandroJun 6, 2018 at 10:41
Add a comment
|
3 Answers
You have to replace style in web\css\source _navigation.less in your custom theme.
For Desktop
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
to (your custom width)
@media only screen and (min-width: 1024px) {
And for Mobile
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
to (your custom width)
@media only screen and (max-width: 1023px) {
Remember one thing you have to add max-width is -1 from min-width.
answered Dec 14, 2016 at 9:04
-
-
This is the correct way: magento.stackexchange.com/questions/131476/… Feb 5, 2019 at 17:23
-
@cycpher909 yes It's not working for me to. I have show toggle menu in 768 to 1024 to. Can you please help me?– MagecodeJul 18, 2019 at 12:15
-
Any help to solve mobile menu error magento.stackexchange.com/questions/328503/…– zusJan 1, 2021 at 12:25
-
For my clarity, just copy from vendor\magento\theme-frontend-blank\web\css\source\ _navigation.less and put into my custom theme app\design\frontend\zero_theme\theme\web\css\source\ _navigation.less right?– zusJan 11, 2021 at 13:46
The JS for the menu that has that functionality can be found in
lib/web/mage/menu.js
First create the folder structure in your theme ex:
[Namespace]/[theme_name]/web/mage/
And copy menu.js from lib/web/mage/menu.js to [Namespace]/[theme_name]/web/mage/menu.js
And change
mediaBreakpoint: '(max-width: 768px)'
to
mediaBreakpoint: '(max-width: 1025px)'
And copy css from mobile and write specific brakpoint
-
-
Copy menu.js file from lib/web/mage/menu.js and paste into your frontend theme like Frontend/Theme/Themename/web/mage/menu.js Jan 9, 2020 at 20:00
-
Then search text "mediaBreakntpoi" into your theme menu.js file. Jan 9, 2020 at 20:02
-
you can find something like mediaBreakpoint: '(max-width: 768px)' Jan 9, 2020 at 20:02
-
just replace whatever width you want to set for mobile view breakpoint like: mediaBreakpoint: '(max-width: 1025px)' Jan 9, 2020 at 20:03
Another approach is to overide the value in your theme of the @screen__m LESS variable. But this will not only change the mobile breakpoint for the navigation, it will change the mobile breakpoint everywhere.
Add to your theme's _extend.less
@screen__m: 960px;
Also, for best performace results you should add the following file to your theme
Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/styles-l.css" media="screen and (min-width: 960px)"/>
</head>
</page>
For more info see:
https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/responsive-web-design/rwd_css.html
