Separate Menu Items Two Columns - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Separate Menu Items Two Columns

SM

Scott Mason

Helix Framework 2 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/

0
14 Answers
Pavel
Pavel
Accepted Answer
2 years ago #116002

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #115708

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!

0
SM
Scott Mason
Accepted Answer
2 years ago #115709

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

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #115715

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

0
Pavel
Pavel
Accepted Answer
2 years ago #115718

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;
}

0
SM
Scott Mason
Accepted Answer
2 years ago #115735

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?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #115742

In Helix Ultimate based templates >> look at screenshot 2 >> https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/menu-navigation

in general it's documenation with many useful tips.

0
Pavel
Pavel
Accepted Answer
2 years ago #115754

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

Hi

0
SM
Scott Mason
Accepted Answer
2 years ago #115852

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 ____

0
Pavel
Pavel
Accepted Answer
2 years ago #115898

Hi. Flex based on Helix 3. Here is right documentation https://www.joomshaper.com/documentation/helix-framework/helix3/megamenu

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #115902

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

0
SM
Scott Mason
Accepted Answer
2 years ago #115989

Thank you both and Pavel that is exactly where I put the code but didn't see any change so figured it was because I couldn't "turn off" the mega menu.

![https://www.tampabayboater.com/images/test1/Untitled-1.jpg]

0
SM
Scott Mason
Accepted Answer
2 years ago #116118

Lesson learned, thank you for your patience! For background before this update I would go to Freelancer for changes/customizations but didn't always get the same coder so invariably I would run into conflicts with updates/plugins/components and wouldn't know where to go to get them fixed so with this one I figured I'd do it myself and take notes.

I can't thank you enough and I'm happy to buy a template if that would make accessing forum support more palatable so just let me know, but I'm probably not going to be applying it to the site directly as updating the template, migrating to Joomla 4 has taken more than a little time already.

0
Pavel
Pavel
Accepted Answer
2 years ago #116150

I can't thank you enough and I'm happy to buy a template if that would make accessing forum support more palatable so just let me know, but I'm probably not going to be applying it to the site directly as updating the template, migrating to Joomla 4 has taken more than a little time already.

Hi. Glad was to help. I am not an employee of Joomshaper, so for me just thanks will be enough :)

0