Navigation CSS cascades to child nodes

[Jon]

Hi Ivan,

'm using an icon font and have allocated an icon to a node.  When the node is in the More menu any child nodes also display the CSS. If the same main node is accessed when NOT in the more menu the icon doesn't show on the child nodes.  

I'm trying to use some CSS to get the icon to only display on the parent node but am having no luck yet.  Any pointers?

Regards

Jon

[Ivan Danchev]

Hello Jon,

We can suggest adding the icons by using the CssClass property and setting two custom classes to the node you want to set an icon to. The first one could be "iconNode" which you can set to all nodes that are going to have icons and the second one could specify the icon and will be different for every icon used:

<telerik:NavigationNode Text="Guitars & Basses" CssClass="iconNode iconCar">

.iconNode > .rnvRootLink:before {
    font: normal normal normal 14px/1 FontAwesome;
    display: inline-block;
    margin-right: 5px;
}

.iconCar > .rnvRootLink:before {
    content: "\f1b9";
}

This way of setting the icons works correctly at our end and they are not propagated to the node's children when the node is collapsed under the sandwich button.

Regards,
Ivan Danchev
Telerik

[Jon]

Hi Ivan,

Well that kind of works.  Initially it seemed OK but it forces the icon to only be on the top level.  If I need an icon on a second level or non root link it fails.

Is there a way to prevent the cascade? kind of like blocking an inherit in reverse

Regards

Jon

[Ivan Danchev]

Hello Jon,

Setting the icons to the second and third levels of nodes can be done with a similar CSS rule:

.iconHeart > .rnvLink:before {
    font: normal normal normal 14px/1 FontAwesome;
    display: inline-block;
    margin-right: 5px;
    content: "\f004";
}

Here's how the Navigation would look like with the "iconCar" class set to the "Accessories" item and the "iconHeart" class set to two of the items of the next levels: video. Again no icon is replicated in siblings or child nodes and only the three that have the custom classes set display the corresponding icons.

Regards,
Ivan Danchev
Telerik

[Jon]

Many thanks Ivan, my CSS structure is a little different however it was close enough to see that I needed to use the > selector.  Works perfectly now :)

[Ivan Danchev]

Hello Jon,

I am glad the suggested selector helped in solving the issue and the icons are applied to specific nodes as expected.

Regards,
Ivan Danchev
Telerik