This is a migrated thread and some comments may be shown as answers.

RadNavigation responsive menu layout

3 Answers 184 Views
Navigation
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 02 Mar 2015, 04:20 PM
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

3 Answers, 1 is accepted

Sort by
0
Accepted
Plamen
Telerik team
answered on 03 Mar 2015, 06:22 AM
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.

 
0
Peter
Top achievements
Rank 1
answered on 26 Mar 2015, 03:07 PM
would css/jquery/javascript help?
I have tried, but did not manage to get it to work.
0
Plamen
Telerik team
answered on 27 Mar 2015, 07:26 AM
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.

 
Tags
Navigation
Asked by
Joshua
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Peter
Top achievements
Rank 1
Share this question
or