Navigation Bar Styling - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 13-Jun-2013 00:00

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

Posted by Community Admin on 14-Jun-2013 00:00

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*/

Posted by Community Admin on 17-Jun-2013 00:00

@Telerik

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

Markus

Posted by Community Admin on 14-Jun-2016 00:00

Yes this would be great!

This thread is closed