Separate Menu Items Two Columns - Forum | JoomShaper
Solved Helix Framework

Separate Menu Items Two Columns

Asked by Scott Mason 3 years ago Last activity 3 years ago

I have a very long main menu item that I would like to separate into two columns. I can see how to change the layout to two columns but don't see how I might move items from the first column to the next without creating a separate menu item which would change the url of the items in each column.

It is the "Brand Images" in the main menu here: https://www.tampabayboater.com/

Accepted answer

Marked as the solution
Pavel
3 years ago · edited

Hi. This place is not for the code, but for the name of the class. Come up with your own class name, add to this field and replace in the code...

Ok, add two-cols-menu class name to this field.

Add the code to the custom.css file (read Helix doc about custom.css file).

.two-cols-menu .sp-dropdown {
    width: 400px !important;
}
.two-cols-menu .sp-dropdown-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

Just so you know for the future. When, in the examples provided to you, something is written in CAPS (like YOUR_CLASS) - this means that you should replace this one with your own significance.

13 more replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
3 years ago

Hi Scott,

Sorry, but I have to say that - you have Flex template - so all template related questions should be asked in Apikko Support.

I can help you only with templates downloaded directly from joomshaper website. Support Policy!

Scott Mason Asked this
3 years ago

I paid for the page builder pro subscription so I could get support here in the forum. Do I have to buy a template from here as well to get these types of questions answered (as I believe the Helix framework is of Joomshaper)?

Paul Frankowski Senior Staff
3 years ago · edited

SP Page Builder is NOT TEMPLATE support.

Indeed Helix is like "engine", but your "car" is not from us. If you have legal purchased version of Flex, support is included, right?

Buying subscription here you agreed of our rules.

info_1062_2023.jpg

Pavel
3 years ago · edited

Hi Scott.

Add your own class to the menu item li element via Helix mega menu settings (do not turn ON mega menu, only add class) and try following CSS code:

.YOUR_CLASS .sp-dropdown {
    width: 400px !important;
}
.YOUR_CLASS .sp-dropdown-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

Result

Or for another order of elements

.YOUR_CLASS .sp-dropdown {
    width: 400px !important;
}
.YOUR_CLASS .sp-dropdown-items {
    display: grid;
    grid-template-rows: repeat(10, 1fr);
    grid-auto-flow: column;
}

Scott Mason Asked this
3 years ago

That is brilliant, exactly what I would like to do but when I paste the code into the custom css for the menu item there are no changes in the display. Perhaps it's because I don't see where I can turn on/off the megamenu?

Pavel
3 years ago

Perhaps it's because I don't see where I can turn on/off the megamenu?

Hi

Scott Mason Asked this
3 years ago

Well, either I'm a complete idiot, there's an issue with the template, or both (I have emailed the template support). One of the issues is probavbly that I"m brand new to Joomla 4 and still struggling with getting comfortable with the interface.

When I click the menu tab, per the documentation, I don't get the menu builder, megamenu, off-campus but manage, all menu items, add moduel to the dashboard.

What is the path to the mega menu? Home > System > Module (or whatever).

Thanks again to you both for kicking in and sorry for being such a ____

Paul Frankowski Senior Staff
3 years ago

Indeed, according to Apikko offer Flex still use old Helix3. I thought that changed over the years.

Log in to reply.