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

Forums / General Discussions / Metro Finance Navigation

Metro Finance Navigation

3 posts, 0 answered
  1. Scott
    Scott avatar
    3 posts
    Registered:
    05 Apr 2012
    04 Apr 2014
    Link to this post

    I am using Sitefinity 6.3 and am a newbie.    I am trying to make our navigation work like the demo site.     It appears, that in the demo site, they are using the radmenu control so that it works with the layout.css.     Can someone please show how to insert the  radmenu control in the Navigation widget to make this work like the demo.      Nothing I have done seems to make the bar show up when selected.     Below is part of the layout.css and the navigation Id selectors that should make this work.     I will be thankful for any help!

    Scott Bryan

    #Navigation ul li
    {
    float: left;
    margin-left: 10px;
    }

    #Navigation ul li a
    {
    width: 100px;
    height: 20px;
    margin: 0;
    padding: 80px 10px 20px 10px;
    display: block;
    color: #666666;
    cursor: pointer;
    text-decoration: none;
    background: #fff;
    }

    #Navigation ul li a:hover
    {
    color: #141E26;
    padding-bottom: 10px;
    border-bottom: 10px solid #f8f8f8;
    background: #F8F8F8;
    }

    #Navigation ul li a span
    {
    margin: 0;
    padding: 0;
    float: none;
    display: inline;
    white-space: normal;
    }

    #Navigation ul li a.rmSelected
    {
    color: #A90E1E;
    padding-top: 75px;
    padding-bottom: 15px;
    border-bottom: 10px solid #A90E1E;
    }

  2. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    Registered:
    07 Dec 2016
    09 Apr 2014
    Link to this post
    Hi Scott,

    In Sitefinity 6.1 we have introduced a new Navigation widget which is using the Kendo UI Menu. However, you can still use the old navigation widget which uses the RadMenu control. You may take a look at the following article on how to use can use the old navigation widget in your Sitefinity project.

    If you would like to use a custom navigation widget, here is a sample on how you can map the SitefinitySiteMapDataSource to the RadMenu control:

    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="navigation" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>  
     
    <navigation:SitefinitySiteMapDataSource runat="server" ShowStartingNode="false" ID="dataSource" />    
      
    <telerik:RadMenu ID="RadMenu1"   
        runat="server" EnableEmbeddedSkins="false" DataSourceID="dataSource">
    </telerik:RadMenu>
      
    Here is also a link for additional information about the Telerik's RadMenu.

    As for the css code, I think that the line below marked in yellow makes the bar to show up when the page is selected:

    #Navigation ul li a.rmSelected
    {
    color: #A90E1E;
    padding-top: 75px;
    padding-bottom: 15px;
    border-bottom: 10px solid #A90E1E;
    }

    Here is also a short video for your reference. Can you please make sure that these styles are applied to your navigation.

    Regards,
    Sabrie Nedzhip
    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. Scott
    Scott avatar
    3 posts
    Registered:
    05 Apr 2012
    10 Apr 2014 in reply to Sabrie Nedzhip
    Link to this post

    Thank you so much Sabrie,   I will let you know the results

    Scott 

     

3 posts, 0 answered