RadNavigation responsive menu layout

5 posts, 1 answers
  1. Joshua
    Joshua avatar
    6 posts
    Member since:
    Oct 2014

    Posted 02 Mar 2015 Link to this post

    I'm using RadNavigation to create a responsive menu for my website. 

    I have run into two issues. 


    1.
    How can I make certain NavigationNodes right aligned? So I can have a log out button be right aligned, away from the rest of the options. Here is my code 
    <telerik:RadNavigation runat="server" ID="nav1" EnableTheming="true">
        <Nodes>
            <telerik:NavigationNode Text="Home" NavigateUrl="Default.aspx">
     
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Causes" >
                <Nodes>
                    <telerik:NavigationNode Text="My Causes"></telerik:NavigationNode>
                    <telerik:NavigationNode Text="Manage Causes"></telerik:NavigationNode>
                </Nodes>
            </telerik:NavigationNode>
            <telerik:NavigationNode Text="Log Out" NavigateUrl="LogOut.aspx">
     
            </telerik:NavigationNode>
        </Nodes>
    </telerik:RadNavigation>

    I want the 'Log Out' navigation node to be right aligned. I've attached an image of what the menu bar currently looks like. 

    2. I want to be able to hover over the elements to see the drop down. I Don't know where to change this with RadNavigation

  2. Answer
    Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 03 Mar 2015 Link to this post

    Hi Joshua,

    Here is the CSS that helped me right align the LogOut node after adding a CssClass="logOut" to it:
    .RadNavigation .logOut {
               position: absolute;
               right: 0;
               top: 0;
           }

    As for the second question unfortunately in the first version of the control expanding nodes on hover is not supported. Yet it is in our to do list and we have a feature request for this functionality in our feedback portal and you can follow it and vote for it here.

    Hope this information will be helpful.

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter
    Peter avatar
    4 posts
    Member since:
    Oct 2010

    Posted 26 Mar 2015 Link to this post

    Would it be possible to achieve this with a combination of jquery/css/javascript.
    I have tried but failed,... This would be a perfect addition to the component.
  5. Peter
    Peter avatar
    4 posts
    Member since:
    Oct 2010

    Posted 26 Mar 2015 Link to this post

    would css/jquery/javascript help?
    I have tried, but did not manage to get it to work.
  6. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 27 Mar 2015 Link to this post

    Hi Peter,

    If you are asking about the hover over functionality unfortunately there is no easy javascript workaround for the issue but it is in our to do list already with high priority and we will do our best to add it as soon as possible. Please excuse us for this current limitation of the control.

    Regards,
    Plamen
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017