This is a migrated thread and some comments may be shown as answers.

Navigation CSS cascades to child nodes

5 Answers 79 Views
Navigation
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 28 Jan 2016, 01:05 PM

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

5 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 02 Feb 2016, 09:22 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jon
Top achievements
Rank 1
answered on 02 Feb 2016, 01:56 PM

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

0
Ivan Danchev
Telerik team
answered on 03 Feb 2016, 03:37 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jon
Top achievements
Rank 1
answered on 08 Feb 2016, 09:12 AM
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 :)
0
Ivan Danchev
Telerik team
answered on 09 Feb 2016, 01:50 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Navigation
Asked by
Jon
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Jon
Top achievements
Rank 1
Share this question
or