Hello !
You can achieve this by doing this in a page using the tagdiv Composer and then insert it into your mega-menu.
Create a new page and click on edit with tagdiv composer:
https://www.screencast.com/t/SS5ozgvNVoH
Add the elements you want: https://www.screencast.com/t/aa7c3riTbx9
To achieve that I used a image element and a list On the list items to insert link you will have to insert it HTML like this: name
After you have created your page save the changes, publish the page, copy the page id, in my case 1041.
Go to Appearance – Menus and add the page id in the category you want ot be displayed: https://www.screencast.com/t/vDgfDn78je
The result should look like this: https://www.screencast.com/t/IPpKXRCXp
You will be able to see the list too if you name it.
I hope this was helpfull !
Thank you !
Thanks for your help. It gave me a good idea and I was able to implement it on my website https://www.stemjar.com/. Hover your mouse on oral healthcare menu. Just one thing is pending. How to make the topmost item of every list as a button or put some differentiator to make someone know that that it the topmost category of that particular list. Refer to this as it has a similar look.
Hello !
If you meant something like this here is the css code: https://www.screencast.com/t/0zv63W4g
.sf-menu>.current-menu-item>a, .sf-menu>.current-menu-ancestor>a, .sf-menu>.current-category-ancestor>a, .sf-menu>li>a:hover, .sf-menu>.sfHover>a {
background-color: black;
border-radius: 15px;
color: white;
line-height: 30px!important;
margin-top: 22px;
}
This code must be inserted in here: https://www.screencast.com/t/J1Nxw5s5
I hope this was helpfull !
Thank you !
