RadNavigation css

3 posts, 0 answers
  1. Kjell
    Kjell avatar
    212 posts
    Member since:
    May 2011

    Posted 18 May Link to this post

    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. Kjell
    Kjell avatar
    212 posts
    Member since:
    May 2011

    Posted 18 May in reply to Kjell Link to this post

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

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

  3. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    605 posts

    Posted 23 May Link to this post

    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.
Back to Top