Navigation CSS for Sitefinity 6.3 - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Navigation CSS for Sitefinity 6.3

  • 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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  • 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
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items