RadNavigation css

[Kjell]

How do i change the RadNavigation css style like the attached image?

I have set  EnableEmbeddedSkins="false".

And use this css now:

 

html .RadNavigation .rnvMore,
html .RadNavigation .rnvRootLink {
    padding-top: 0px;
    padding-left: 14px;
    padding-bottom: 0px;
    border: none;
    margin: 0px;
}


html .RadNavigation {
    font-size: 1.5em;
    font-family: 'Alegreya Sans', sans-serif;
    color: white;
    border: none;
}


    html .RadNavigation .rnvHovered .rnvRootLink {
        background-color: lightblue;
        border: none;
    }

[Kjell]

Or if i use Skin="Material", how set the background to transparent?

Not the sandwich button, and all nodes paced under the button.

[Ivan Zhekov]

Hello, Kjell.

You can use the following styles:

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 {
    border-color: #ffffff;
    background-color: #f0f0f0;
    color: #808080;
}
.rnvPopup .rnvHovered {
    color: #f0f0f0;
    background-color: #808080;
}

The last bit is regarding the popup.

Regards,
Ivan Zhekov
Telerik by Progress