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

Forums / Designing & Styling / Navigation customization

Navigation customization

4 posts, 0 answered
  1. Lamah
    Lamah avatar
    4 posts
    Registered:
    05 Oct 2010
    26 Feb 2012
    Link to this post

     

    Good afternoon

     

    How can I customize my navigation so In Each current page the item in navigation menu must be background highlighted

    and the below is my CSS code :

     

    #nav{
    background-color:#687484;
    width:1000px;
    height:24px;
    float: left;
         

     
      
                 }

    #nav ul {    
              background-color:transparent;
                 border-right: 0px white none;
                 border-bottom:0px white none;
                 border-top:0px white none;
                 border-left:0px white none;
         
          

              }
           
       
     #nav li { 
               background-color:#687484;
            
             padding-top:0px;
            TEXT-ALIGN: left;
            
     
       
             }
     #nav A {
         COLOR: white;
         font-weight:bold;
        }
    #nav A:hover {
         COLOR: #90967f;
         font-weight:bold;
       

  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    28 Feb 2012
    Link to this post
    Hi Lamah,

    Each type navigation has a unique css class, set to the currently opened page. You can use it to declare styles to the list element, which corresponds to the page. In the list below you find each navigation and the css class that is set to the currently opened page:
    Horizontal with drop down menus  - .rmSelected
    Horizontal/Horizontal with tabs/Vertical - .rtsSelected
    Treeview navigation - .rtSelected

    All the best,
    Jen Peleva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. Lamah
    Lamah avatar
    4 posts
    Registered:
    05 Oct 2010
    01 Mar 2012
    Link to this post
    Thanks for helping ... This help me alot :) Is there any documents show me all the css classes for the navigation .. So i can customize my navigation easialy?
  4. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    02 Mar 2012
    Link to this post
    Hello Lamah,

    Our navigation is based on the RadControls. Here's a table with all navigation types and their corresponding RadControls. The links lead to the css reference of each control. Hope this helps.

     Horizontal

     RadTabStrip

     Horizontal with drop-down menus

     RadMenu

    Horizontal with tabs

     RadTabStrip

    Vertical

     RadTabStrip

    Tree (vertical with sub-levels)

     RadTreeView

    Sitemap divided in columns

     RadSiteMap

    Sitemap divided in rows

     RadSiteMap

    Custom Navigation

     RadSiteMap



    All the best,
    Jen Peleva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
4 posts, 0 answered