Hello,
I have successfully added icons to my mega menu. But how do i add icons to its sub menu. I am using font awesome to add icons.
Hello,
This will not be an easy task as it will have to be added with css. The mega-menu sub-categories will have to be targeted using a child selector. For example:
http://screencast.com/t/PsP9L9UqNw
If you want to add particular icons for every menu item, you will need to use a code for every single menu item like so:
.menu-item-53 .block-mega-child-cats a:nth-child(4)::before {
content: "\f040";
font: normal normal normal 14px/1 FontAwesome;
margin-right: 5px;
position: relative;
}
The nth child is the number corresponding for every child of the main menu item.
Result: http://screencast.com/t/z4KXnbfhQW
You will also need the menu-item for the main menu to target them. you can get this class with your browser inspector.
I hope this helps.
Thanks.
hello,
It worked like a charm. But the icons in the sub menu are not appearing in the mobile menu, whereas the icons of main menu are appearing. Are the menuids different for the mobile menu?
Hi,
For the mobile version you have to use different code as the classes are different. (it’s a different menu)
You can use this code:
.menu-item-53 ul li:nth-child(4)::before {
content: "\f040";
font: normal normal normal 14px/1 FontAwesome;
margin-right: 5px;
position: relative;
}
It will need some further positioning though.
Thanks.
