Navigation CSS cascades to child nodes

6 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 28 Jan Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 02 Feb Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 02 Feb in reply to Ivan Danchev Link to this post

    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

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 03 Feb Link to this post

    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
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 08 Feb in reply to Ivan Danchev Link to this post

    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 :)
  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 09 Feb Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017