Mega Menu - Create Or Overwrite Layout - Question | JoomShaper

Mega Menu - Create Or Overwrite Layout

I

Ingenium

Template 3 weeks ago

Hello there,

as you now may know, I am using the Educon II Layout.

Sadly, I am not happy with how the menu is styled, as styles like the image on the left, dropdowns taking up a min-height of 300px, and for some reason a box shadow starting on level 3 that completely break the layout-design (in the live template it's not visible as you only have level 1 and then level 2).

What would be the easiest way to use a custom design layout for the menu? As you do in the live-demo, we're using the minimal layout as well (page is provided in hidden content). As you can see on our page we have several issues:

  • like mentioned above, level 3 has box shadow (yes, I found a way to remove that with custom css, but that's only one issue)
  • I don't want the whole dropdown to be white and no minimum height, as smaller menus would take up way to much space then and there is a lot of empty white space then
  • weird behaviour with one menu (Studium and then Diplom and Master)

Again, a lot of the elements and template pages for Educon II seem not fully worked out yet and the template itself sadly apears then as a "work in progress".

So my question: Can you provide me a way to overwrite the style of the menu in a reliable way? E.g. which style classes have to be overwritten? Which templates (if any) need to in mind when doing so?

Thank you for your help and reply!

0
3 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 weeks ago #229252

Hello Ingenium,

Thank you for reaching out to our technical support forum. I’m sorry to hear about the trouble you’re experiencing. Rest assured, I will look into this issue for you and work to resolve it as quickly as possible.

If you could kindly provide any additional information regarding the issue, it would greatly help me investigate and address it more efficiently. Please share a screenshot of your issue to understand it better. Take a screenshot and share via any platform. For example: Lightshot or Imgur

Generally, you cannot override the megamenu layout. You can change the original file. But you have to change it every time you update the template. You can check this file:

templates/educon_ii/features/menu.php

Best regards

0
I
Ingenium
Accepted Answer
3 weeks ago #229275

Hello Mr. Khan,

The troubles/issues are with the incomplete styling of the template Educon II. In Order to have my own "style" now of the menu and not having the style rules from any presetX.cs and template.css interfere, I did the following:

We replaced Educon II’s incomplete menu styling without modifying the Helix core menu renderer too much.

  • Minimal Header Layout override: In the the MinimalLayout directory, the header.php was adjusted: Helix’s desktop megamenu output was removed and replaced with a Joomla menu module from a custom desktop-menu position. The Helix offcanvas toggler remains unchanged.
  • Desktop menu: A custom mod_menu layout (mymenu.php) generates independent .mm-nav-* classes, correct active states, accessible submenu buttons and ARIA attributes.
  • Offcanvas menu: A second menu module on the existing offcanvas position uses mymenu_offcanvas.php. Helix still controls the outer offcanvas panel, overlay, opening and closing.
  • CSS: Desktop and offcanvas menus use fully namespaced custom classes, preventing conflicts with Educon/Helix menu CSS. Hover, active, focus, chevrons and submenu transitions are defined separately.
  • JavaScript: Custom scripts provide keyboard navigation, submenu toggling, ARIA state updates, Escape handling and animated accordion behaviour (the accessibility features are completely missing in the default menu)
  • index.php: Adjusted to load a custom_head.js once in the document head and custom_body.js once near the end of the body, avoiding duplicate script inclusion (opposed to the original index.php which seemed to load the custom.js twice, once in the header and once in the body).

No other Helix framework core files were changed; only template layouts, Joomla menu overrides, custom.css and custom JavaScript files were used.

I can only show you via a screenshot now with the other header layouts how at least the menu issue looks like: https://imgur.com/a/DdU0hcm

As for the off-canvas: the same issues are there with missing styles for the non-sp-pagebuilder-link menus. However, as I have used an own module now for that too with own styling, I can't revert back now and provide a screenshot of that.

However, you should be able to see those issues also when you add a 3rd level to a menu in the Educon II template demo.

All the best, Kajetan

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 week ago #230749

Apology for the delay. I have checked the template. This is due to the design of the template. You have the full authority to customize your template. Unfortunately, we are limited to help on customization.

0