Icons' position

2 posts, 0 answers
  1. Kjell
    Kjell avatar
    223 posts
    Member since:
    May 2011

    Posted 27 Mar 2018 Link to this post

    How do I change the icons' position in RadNavigation?

    Wrong position: expand_image_position_now.png

    Correctly position: expand_image_position_correctly.png

    They are correctly in the hamburger navigation...

    My css:

    <style>
        html .RadNavigation .rnvRootGroup .hiddenNode {
            display: none;
        }
     
        html .RadNavigation {
            font-size: 1.5em;
            font-family: 'Alegreya Sans', sans-serif;
            color: white;
        }
     
            html .RadNavigation .rnvRootGroupWrapper {
                border-width: 0;
            }
     
            html .RadNavigation .rnvRootGroup > .rnvItem {
                margin: 0;
            }
     
            html .RadNavigation .rnvMore,
            html .RadNavigation .rnvRootLink {
                margin: 0;
                padding-top: 0;
                padding-bottom: 0;
                border-width: 0;
            }
     
            html .RadNavigation .rnvHovered.rnvMore,
            html .RadNavigation .rnvSelected.rnvMore {
                margin: 0;
                border-width: 0;
            }
     
                html .RadNavigation .rnvHovered.rnvMore.rnvRight,
                html .RadNavigation .rnvSelected.rnvMore.rnvRight {
                    margin: 0;
                }
     
            html .RadNavigation .rnvHovered .rnvRootLink {
                background-color: lightblue;
            }
     
        .rnvPopup {
            background-color: white;
            border-color: #cfd8dc;
            color: #455a64;
        }
     
            .rnvPopup .rnvHovered {
                border-color: #cfd8dc;
                color: #159eda;
                background-color: #eceff1;
            }
    </style>

     

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    570 posts

    Posted 27 Mar 2018 Link to this post

    Hello Kjell,

    Increasing the line-height or the font-size of the elements with class .rnvToggle can achieve the desired appearance. 

    html .RadNavigation .rnvToggle{
        line-height : 2em;
    }

    Also, I can recommend reviewing the Improve Your Debugging Skills with Chrome DevTools blog post, especially the Inspect the Generated HTML of a Control and See the Applied Styles sections. That would help you identify which styles are applied to the elements and help you for further customizations and achieve the desired appearance more easily. 

    Regards,
    Peter Milchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top