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!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 111
Toufiq

Toufiq

Total Accepted Answers: 69
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 26
Ofi Khan

Ofi Khan

Total Accepted Answers: 12
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 9

120

Templates

310728

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