Navigation CSS for Sitefinity 6.3

Hi All,

I am new in sitefinity.
I am creating a custom template and added navigation widget.
I want add own css on navigation widget, but is is not working.
I added css code below please look it and help me how to define css for navigation widget on sitefinity 6.3.

.RadMenu_mainnavigation
    position:relative;
    float:left;
    width: 100%;
    margin-top: 50px;
    background-color: white;
    z-index:999px;


.RadMenu_mainnavigation .rmLink
    font-size: 18px;
    letter-spacing: -1px;
    font-weight: bold;
    color: #666;
    padding: 5px 10px;
    border-top-left-radius: 5px;     
    border-top-right-radius: 5px;     
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;


.RadMenu_mainnavigation .rmLink:hover
    color: #888;


.RadMenu_mainnavigation .rmLink.rmSelected
    background-color: #333;
    color: #fff;


.RadMenu_mainnavigation .rmSlide .rmLink
    border-top-left-radius: 0px;     
    border-top-right-radius: 0px;     
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;


.RadMenu_mainnavigation .rmLink.rmExpanded
    background-color: #1973a7;
    color: white;


.RadMenu_mainnavigation .rmSlide .rmLink
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0px;
    background-color: #1973a7;
    border-bottom: 1px solid #166694;
    border-top: 1px solid #2b89bf;
    line-height: 35px;
    width: 180px;
    color: #cce8f8;
    font-weight: bold;
    font-size: 12px;


.RadMenu_mainnavigation .rmSlide .rmItem.rmFirst .rmLink
    border-top: 0px;


.RadMenu_mainnavigation .rmSlide .rmLink .rmText
    padding: 0px;
    padding-left: 10px;

.RadMenu_mainnavigation .rmSlide .rmLink:hover
    background-color: #15608b;
    color: white;
    cursor: pointer;


.RadMenu_mainnavigation .rmSlide .rmLink.rmExpanded
    background-color: #15608b;
    color: #fff;



.RadMenu_mainnavigation .rmSlide .rmSlide .rmLink
    background-color: #15608b;
    font-size: 11px;
    border: 0px;
    font-weight: normal;
    color: #fff;


.RadMenu_mainnavigation .rmSlide .rmSlide .rmLink:hover
    background-color: #0d4c71;

Regards,
Vikash

Hello Viky,

Thank you for contacting Telerik!

I inserted your style into the Quantum project. Judging by the CSS, you are using the RadMenu based navigation (versus the HTML5 based one), which is perfectly OK. I inserted your CSS into the .css file of my website theme. Then, noticing that you have created a custom mainnavigation wrapper CSS class, I applied it to my navigation widget like this:


The end result was this:



which looks pretty well, I'd say. Is that the desired end result? Did you follow the same steps?
Regards,
Grisha 'Greg' Karanikolov
Telerik

Hi Grisha 'Greg' Karanikolov ,

I am using css according to your screenshot.
But in Sitefinity 6.3 does not have RadMenu Control that's why it is not working.
In Sitefinity 6.3 has kendo Menu.

Please let me know, how we will define navigation css according Kendo Menu for Sitefinity 6.3.

Regards,
Viky

Viky,

you should be seeing this under your Navigation section in the toolbox. This is what you should be using.


Regards,
Grisha 'Greg' Karanikolov
Telerik