Important

Submited issues in tickets should be clear and detailed with screenshots to solve these faster. Each ticket should include each issues related only one product so that we can assign to our supporters easily. In the case the ticket doesn't meet these requirements, it can be refused to resolve. Thanks for your cooperation.

Okay
  Print

How to change Megamenu Responsive Breakpoint?

Question:

"I'm currently creating a menu using your mega menu pro plugin. On my site the breakpoint where I need the menu to switch to the mobile version is different to that set in the plugin (768px). Where would I be able to change this figure?"

Solution:

Please try to follow steps:

step 1, Edit the file "/app/code/Ves/Megamenu/view/frontend/templates/topmenu.phtml"

Then find code:

if ($(window).width() < 768) {

Change the 768 to any value which you want. The break point number for mobile screen size.

And find code:

if ($(window).width() >= 768 && $(window).width() < 1024) {

Change the 768 and 1024 to add break point for tablet screen size.

step 2, Edit the file "/app/code/Ves/Megamenu/view/frontend/layout/default.xml", then find code:

Change the 768 to any value which you want. That break point to load desktop styles css file.

step 3, Edit the file "app/code/Ves/Megamenu/view/frontend/web/css/styles-m.css"

Then find code:

@media (min-width:768px) and (max-width:1024px) {

Change 768 and 1024 to any values which you want.

step 4, Run magento2 commands:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

chmod -R 0777 var pub generated