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

RadNavigation css

2 Answers 121 Views
Navigation
This is a migrated thread and some comments may be shown as answers.
Kjell
Top achievements
Rank 1
Kjell asked on 18 May 2017, 12:45 PM

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;
    }

2 Answers, 1 is accepted

Sort by
0
Kjell
Top achievements
Rank 1
answered on 18 May 2017, 01:48 PM

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

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

0
Ivan Zhekov
Telerik team
answered on 23 May 2017, 07:27 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Navigation
Asked by
Kjell
Top achievements
Rank 1
Answers by
Kjell
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Share this question
or