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).

https://kumavision.com/bi/cubeware

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

Shibbir - Staff

4 weeks ago #Permalink
Hi there,

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

Thanks.

KE Comm

4 weeks ago #Permalink
Not knowingly. How would I do that? with .hidden-sm ?
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:

/YOURjoomla/templates/shaper_helix3/features/menu.php

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.
@ 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!
Rüdiger
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 ;)
Thank you very, very much, pepperstreet! That solved my problem!

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

KE Comm

One week 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: 142
Toufiq

Toufiq

Total Accepted Answers: 63
Shibbir

Shibbir

Total Accepted Answers: 27
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 5
Pavel

Pavel

Total Accepted Answers: 4

100+

Templates

200,000+

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