2

I have a website in three languages, so the main menu doesn't take the same space for all the languages. Because of that, the main menu gets broken up into two lines when the words in the main menu are longer for some languages, which needs to be avoided. Any idea how I can code that the main menu bar switches to my offcanvas menu, as soon as it would break into two main menu lines, one above the other, maybe in CSS?

Improve this question
1
  • I understand what you are saying, but I think it would be valuable to volunteers if you showed us a couple of screenshots that expose the issue, as well as the relevant bits of code that contibute to the menu layout/styling (especially for people who don't have your particular theme installed). Have you contacted Helix support? What did they say? Did you take the issue to you local Joomla Users Group? What did they say?
    – mickmackusa
    Commented Aug 5, 2019 at 11:51

1 Answer 1

Reset to default
2

Actually figured out a way via CSS. Just type the following code into your Custom CSS field:

@media (max-width:1210 px){
  .sp-megamenu-parent > li > a {
    display:none;
  }
  #offcanvas-toggler {
    display: block!important;
  }
}

Note that:

  • This makes your megamenu parent disappear, and your offcanvas toggler appear at a screen size of 1210px and below (which is perfectly the longest size of my main menu in the language with the longest words)
  • .sp-megamenu-parent > li > a and #offcanvas-toggler are the css-names of my main menu and offcanvas menu respectively; make sure you type in yours to make things work for you equally well.
Improve this answer
3
  • Great job by self-solving. May we see the before and after shots? Ideally, pages with more than one answer are better for this community. If you can add a bit more to your question, that would be great. There may be more than one way to fix this issue.
    – mickmackusa
    Commented Aug 5, 2019 at 20:16
  • It's generally a good idea to avoid using !important when you can uxengineer.com/css-specificity-avoid-important-css
    – TryHarder
    Commented Aug 5, 2019 at 22:44
  • And don't forget to accept your own answer so it shows up as resolved.
    – Irata ♦
    Commented Aug 6, 2019 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.