+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Navigation CSS for Sitefinity 6.3

Navigation CSS for Sitefinity 6.3

4 posts, 0 answered
  1. Viky
    Viky avatar
    9 posts
    Registered:
    09 Sep 2012
    31 Mar 2014
    Link to this post

    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

  2. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    02 Apr 2014
    Link to this post
    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
     
  3. Viky
    Viky avatar
    9 posts
    Registered:
    09 Sep 2012
    03 Apr 2014 in reply to Grisha 'Greg' Karanikolov
    Link to this post

    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

     

     

     

     

  4. Grisha 'Greg' Karanikolov
    Grisha 'Greg' Karanikolov avatar
    156 posts
    Registered:
    30 Nov 2016
    04 Apr 2014
    Link to this post
    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
     
4 posts, 0 answered