How to add custom classes to CSS list menu webpart

sayali deshpande asked on April 4, 2016 14:33

I am working on Kentico 9 to build the navigation for the site using CSS list menu webpart(CMSListMenu) by using Portal Engine.

I was able to build the site navigation through that but have some queries regarding the default CSS classes that are applied to the CMSListMenu.

I want to remove the these classes (CMSListMenuUL- applied to UL elements, CMSListMenuLI- applied to LI elements, CMSListMenuLink- applied to A elements, CMSListMenuHighlightedLI- applied to LI elements for highlighted items). I have tried to remove this by unchecking the Render CSS Classes property for the CSS list menu. But while doing so it is not allowing me to add any custom classes to those elements. I want to have bootstrap default classes for navigation which are usually applied to UL and LI elements and remove the default classes for CSS list menu webpart.

css list menu

Recent Answers

David te Kloese answered on April 4, 2016 14:46

Hi,

The default CSS List Menu is a basic menu webpart and has no complex styling abilities. Could try to customize it but you'd have to add all your own CSS classes. Perhaps best if you look into the Hierarchical Viewer.

Somewhat older article, but perhaps have a look at the following:

http://devnet.kentico.com/articles/creating-a-mega-menu-using-hierarchical-transformations

Greets,

David

1 votesVote for this answer Mark as a Correct answer

Anton Grekhovodov answered on April 4, 2016 15:56 (last edited on April 4, 2016 15:56)

Also you can read more about navigation here https://docs.kentico.com/display/K9/Building+website+navigation

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on April 5, 2016 05:09

Your best bet is to NOT use the CSS List Menu webpart because it is hard coded with those classes. You can remove the classes but you CANNOT add your unique classes in. I'd suggest using a Universal Viewer with a Hierarchical Transformation. This will allow you to do exactly what you want.

0 votesVote for this answer Mark as a Correct answer