Support Forums

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

Your Time: Our Time:

Show Offcanvas Menu at 1024px width

Featured Lock Resolved Issue
I have the same problem as described in this post because Safari on iPad does seem to have problems with my megamenue (sometimes the dropdown does not work).

I looked at your instructions in the mentioned post, but I seem to be too stupid to adapt it to my settings:
My Header bar has the columns set to 9+3: menu 9, logo 3.
What column styles do I have to enter in this case to show the mobile menu only at a screen width of 1024px?

7 Answers


More than a month ago #Permalink
Hi there,

Did you use CSS media query to show the mobile menu in 1024px size?


KE Comm

More than a month ago #Permalink
Not knowingly. How would I do that? with .hidden-sm ?


More than a month ago #Permalink
Hello KE Comm, it might get hard to override the default bootstrap CSS media queries. Unfortunately the off-canvas toggle default CSS classes are "hard-coded" in this location:


So Bootstrap3 default utility classes will be applied.
There is no template style parameter or variable to modify the defaults.
You can just choose the pre-defined classes for section rows and columns.

Basically you have 3 options:
- core hack and modify the template's menu.php (bad!)
- add custom JS to remove or set your own class names (meh!)
- override défault CSS media query (probably best choice)

Hopefully this gets much more flexible in HELIX ULTIMATE.


Update: Here is a possible workaround to override the applied CSS classes and their properties:

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

#offcanvas-toggler.visible-sm {
display: block !important;
ul.sp-megamenu-parent.hidden-sm {
display: none !important;


Unfortunately !important has to be used.
Set media query properties to your liking. Add other breakpoints, devices or orientation as needed.

Hope this helps.

Rüdiger P. Strey

More than a month ago #Permalink
@ pepperstreet
As I do have the same problem as the threadstarter, I am interested in your solution.
Where do I have to insert your above listed code for the workaround?
Thank you in adance for your answer!


More than a month ago #Permalink
Where do I have to insert your above listed code for the workaround?

Hallo Rüdiger, the code is CSS and can be used in 2 different places, which are save on updates:

A.) in your template style settings -> tab custom code -> custom CSS
(best option for smaller changes or if it needs to be template style specific)
B.) in your template's css folder -> custom.css
(create and name the file, if not present.)

Hoffe das hilft ;)

Rüdiger P. Strey

More than a month ago #Permalink
Thank you very, very much, pepperstreet! That solved my problem!

Vielen, vielen Dank, pepperstreet, das hat mein Problem gelöst!

KE Comm

More than a month ago #Permalink
Danke auch von mir!!! Thanks!

There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 164


Total Accepted Answers: 93


Total Accepted Answers: 71


Total Accepted Answers: 4

SuperSys IT Services

Total Accepted Answers: 2




Community Users


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. is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us