Hello,
It is done with css but it needs to be targeted on the specific menu item otherwise it will affect all of the menu at once. It is a custom implementation made for the demo presentation. You can do it by targeting a specific menu by it’s unique menu item id here is an example for my menu: https://www.screencast.com/t/S1m1YrpW
.menu-item-230 .sub-menu{
padding: 14px;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
The menu item number needs to be changed to your own unique menu item number.
Thanks.
Good afternoon, try to do what they indicate but do not generate me the menu I want.
I want to do it within a custom link, do I have to do something additional to the CCS code?
I am not very expert in programming but I understand a little.
I would appreciate it if you can give me a step-by-step guide to achieve it.
Thanks Bogdan.
Hello,
Please create the menu item you need on your site and provide the link and I will provide the code to split it into 2 rows.
Thanks.
I send you a screenshot of the created menu and the result, the idea is that it is divided into 2 columns.
Thank you very much.
The menu link that I want to customize is this,
http://rca.apps-1and1.com/programas
https://www.screencast.com/t/8ii1nu6hhb
Thanks Bogdan.
Hi,
Please add this code in your theme panel-> custom code section:
.menu-item-196 .sub-menu{
padding: 14px;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.menu-item-196 .td-menu-item > a{
padding: 4px 10px!important;
}
Thank you!
Hi Bogdan,
Could you please provide the code to split a submenu to 3 columns?
Could you also provide the code to change background color for specific menu ids?
Thanks!
Hello,
For 3 columns you simply change the letter from the column count lines from 2 to 3.
Yes, you can change specific menu id’s background like so:
.menu-item-657 {
background-color:lightblue;
}
Thanks.
Thank you very much for your help Bogdan B.
Hi Guy’s,
Firstly, great template! Thank you.
However I am experiencing some very frustrating problems 🙁
I really need my menu to be in 3 columns. I have followed the instructions above but to little effect. I cannot seem to get the sub menu items to go into three columns no matter what I try.
Your Mega Menu, although a very nice menu. Is not developed to accommodate sites with more than 20 odd sub menu categories.
Basically I need my menu to look like this: http://adcomm.co.za/ <- This is my current site. I am trying to move my site over to WordPress. So far everything is great except for this menu 🙁
This is what I have tried, in 2 columns and 3 columns:
https://www.screencast.com/t/6uoE1SkOExza
https://www.screencast.com/t/rlymEILq
https://www.screencast.com/t/I0Jc9hdQmjf
this is what I need>
https://www.screencast.com/t/GlqxYS64l
Thank you in advance for any help.
Hi
I tried the CSS for my Destinations -> Europe sub-meny. I get two columns, but the width is too small to accomodate the name Storbritannien. Also the background sub-sub-meny for Storbritannien -> Scotland and England is getting to small. Is this possible to modify?
Thanks.
Hello,
Please understand that this is not a default theme option. It is a custom code. It needs further adjustments in order for it to work properly. Sorry but any further implementation to this type of menu will require custom modifications which we cannot provide. Please hire a freelancer to help out with the code if you need any further help. We do not have a customization department and customization of the theme code is not part of the main theme support. We offer help when we can but we cannot make the full implementation.
Thanks.
Hi Bogdan,
I find this a very weak reply. I am expecting that because I paid for a premium theme. The menu should work out of the box? I didn’t pay peanuts for the theme?
Also you provide the css selectors above for creating 2 columns. Why now to make it 3 columns and to adjust the width of the sub-menu columns do I need to pay a developer for customization when all you need to do is tell me the selector to use to change the width of this?
Again something that I would expect to work out of the box like a theme menu. must now be paid for to make it work. The menu you have is fine. I just want the sub-menu to be listed on 3 columns and the sub-menu of that to work the same. Surely this is not a customization. But something that should work??
Regards.
Hi,
@Ladiesabroad you could remove the code you used now for the “Europa” menu item and use this one instead
– https://www.screencast.com/t/sZVSPg5w
It will increase the width of the sub-menu in order to display better, also it will now affect only the first sub-menu of the “Europa” menu item.
.menu-item-6530 > .sub-menu {
padding: 14px;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
width: 21em!important;
}
@Adcomm_Media Please provide a link to your website if possible, we will try to give you a more accurate solution. If you cannot provide a link, I could give you a more general code that might work. This may require modifications in your case
– https://www.screencast.com/t/74jdQgXbcd7G
You must use your own menu ID in the code
– https://www.screencast.com/t/oQBesGqCAm
A background hover color similar to what you have on your current website, can be set in the theme panel if needed
– https://www.screencast.com/t/544Eghu5TMt
.menu-item-9310 > .sub-menu{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
width: 40em!important;
}
.menu-item-9310 > .sub-menu li{
border-bottom: 1px solid #e5e5e5;
}
It will separate the menu items in 3 columns and increase the width (this can be changed if needed). It also ads a border bottom but you can remove that if you don’t want it.
Currently in the theme there is no option to create sub-menus with columns. There are simple drop-down menus, mega-menus and page menus.
Thanks
Hi Simon C,
Hi There,
Thank you for your response.
I have had to move the site to a live environment. This Menu has been giving me headaches for days now. The live test build is sitting at:
I seem to have got the menu as close as I can on Chrome, but then it doesn’t work on Firefox. If we can get the menu to look as close to (or exactly the same) as this please http://adcomm.co.za I will be very grateful.
If you need me to create admin logins for you, please let me know? And where to send them?
Thanks so much.
Hi,
@Adcomm_Media Replied by email. The solution seems to work on both browsers at the moment
– https://www.screencast.com/t/wbiQS6tjkeu
– https://www.screencast.com/t/9k5CKpQOF9p
Thanks
Thanks Simon,
Someone helped me in the interim. but I still need the width and background hover to fill that line please?
Is there any way you can get the width to accommodate the full line of text perhaps? And the blue hover to fill the actual background please? So for example – Public relations needs to be in one line and Recently Featured News in one line and Snapper Display Systems in one line. With the blue filling the whole line where that text is? I hope that makes sense? I need it to look like this – http://adcomm.co.za please? Don’t may any attention to the different blues. I just need the menu to work the same please.
Replied via email.
This thread helped me a lot, thank you.
Two more questions:
1. How do I “center” the sub-menu. If I am adjusting the width to like 90em !important, the sub-menu only goes to the right and you can´t see most of the sub-menu. Is it possible to start the sub-menu below the logo on the left or center the sub-menu?
2. When I split the menu and the links aren´t an odd number, it hovers the last link on the left and also hovering a bit on the right column.
Thanks a lot!
Hi.. thanks for tutorial, Now I have column for menu. But, Is it possible to create header for columns? example: https://prnt.sc/ilqv5i
Thanks,
Hello,
This is not an official implementation. It is a customization that we provided as a quick solution. If you need further modifications to the solution I provided, please hire a freelancer to help out with the code. by default our theme does not provide 2 columns for sub-menus.
Thank you for your understanding.
Hi,
I am interested in implementing this menu to my main menu because I have a lot of countries as categories for Europe.
Is it possible to use the following code but only have this for the desktop version of the site? I don’t particularly like having the multiple columns on the sub-menu on mobile version?
Here is the code I am using based on the above recommendation:
.menu-item-196 .sub-menu{
padding: 14px;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.menu-item-196 .td-menu-item > a{
padding: 4px 10px!important;
}
I answered my own question…just needed to put in the Advanced CSS for Desktop only.
