Icons' position

[Kjell]

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>

 

[Peter Milchev]

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