Navigation Bar Styling - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Navigation Bar Styling

  • Navigation Bar Styling
  • Hi,

    I was wondering is it possible to design a navigation bar in sitefinity that has icons next to each parent level page menu item? I'm not sure how I'd go about this and I'd love to know if anyone else had tried this and been successful. 

    Thanks
  • Using the default Navigation Widget I overwrote the default background and then using the suedo class :before added the icons.  Attached are the icons.jpg(image I used for background) and Navi_with_Icons.pnmg which is a screen shot of the final.  All you will have to do in the CSS is change the image URL with yours and positions it accordingly.  While this approach is not dynamic it is a pretty simple solution.

    ul.rtsUL li.rtsLI background:none; height:45px;/*Give all li height and removed default background*/
     
    ul.rtsUL li.rtsLI a, /*Resets all default background images & colors*/
    ul.rtsUL li.rtsLI a span, /*Resets all default background images & colors*/
    ul.rtsUL li.rtsLI a span span, /*Resets all default background images & colors*/
    ul.rtsUL li.rtsLI a span span span background:none;/*Resets all default background images & colors*/
     
    ul.rtsUL li.rtsLI .rtsLink.rtsSelectedcolor:green;/*Changes selected Item font color from white*/
     
    ul.rtsUL li.rtsLI a position:relative; padding-left:25px;height:45px;/*makes a relative so we can postion the :before elements add 25px padding so background image wont overlap*/
     
    ul.rtsUL li.rtsLI a:beforeposition:absolute; top:0px; left:0px; content: ' '; height: 45px; width:27px;/*Positions all before elements and give it content & height & width so it can be visible*/
    ul.rtsUL li.rtsLI:nth-child(1) a:beforebackground:url(../Images/icons.jpg) no-repeat -71px -17px; /*Home Nav Item Replace background URL with yourd*/
    ul.rtsUL li.rtsLI:nth-child(2) a:beforebackground:url(../Images/icons.jpg) no-repeat -124px -17px; /*First Nav Item*/
    ul.rtsUL li.rtsLI:nth-child(3) a:beforebackground:url(../Images/icons.jpg) no-repeat -71px -70px; /*Second Nav Item*/
    ul.rtsUL li.rtsLI:nth-child(4) a:beforebackground:url(../Images/icons.jpg) no-repeat -71px -192px; /*Third Nav Item*/

  • @Telerik

    This might be a nice and handy feature request to have a navi_icon field in the pages properties. How about it?

    Markus
  • Yes this would be great!