We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

MegaMenu and Off-Canvas both showing on tablet / Mobile using Indigo

Featured Lock Resolved Bug
On Desktop view, the site runs perfectly showing just the Mega menu.

When looking at the Mobile/Tablet views, the site shows both the Mega menu and Off-Canvas.

I cannot find any reason why this is happening!

File attached to show problem

Attachments (1)

  • Screenshot 2019-11-01 at 13.33.23.png
    Screenshot 2019-11-01 at 13.33.23.png 220.6 KB

6 Answers

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
Please make sure that you give menu type only mega menu.Please see the screenshot.
http://prntscr.com/pr5ryj

-Regards
Mehtaz

Paul Frankowski - Staff

More than a month ago #Permalink
Hi Debi,
below custom CSS should help


@media (max-width: 990px) {
#sp-header #offcanvas-toggler {margin-right: 20px;}
#sp-header #sp-menu .sp-megamenu-wrapper > ul {display: none !important;}
}

WAD

More than a month ago #Permalink
Hi,
Please make sure that you give menu type only mega menu.Please see the screenshot.
http://prntscr.com/pr5ryj

-Regards
Mehtaz


Thanks for this but I have made it mega only and we still have both showing :( I’ll try Paul’s CSS option and see if that works - thank you both x

Paul Frankowski - Staff

More than a month ago #Permalink
For Tablet change max-width: 990px value to 1024px maybe....

WAD

More than a month ago #Permalink
Morning Paul, can you check http://sfhg.wadesigns.net/ your end as with your code, this end we are still showing the mega menu on Tablet & Mobile!

I have added the following code to try and remove the mega from those devices;

@media (max-width: 990px) {
#sp-header #offcanvas-toggler {margin-right: 20px;}
#sp-header #sp-menu .sp-megamenu-wrapper > ul {display: none !important;}
}

@media (max-width: 1024px) {
#sp-header #offcanvas-toggler {margin-right: 20px;}
#sp-header #sp-menu .sp-megamenu-wrapper > ul {display: none !important;}
}

@media (max-width: 480px) {
#sp-header #offcanvas-toggler {margin-right: 20px;}
#sp-header #sp-menu .sp-megamenu-wrapper > ul {display: none !important;}
}

@media (max-width: 320px) {
#sp-header #offcanvas-toggler {margin-right: 20px;}
#sp-header #sp-menu .sp-megamenu-wrapper > ul {display: none !important;}
}

WAD

More than a month ago #Permalink
OK odd one, my Custom.CSS file appears to have stopped over writing.....

I have saved and uploaded via FTP and also via the server cPanel - anyone else had this issue? Currently over writing the template file due to this issue :(


There are no replies made for this post yet.
Be one of the first to reply to this post!

126

Templates

333537

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us