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

Forums / Designing & Styling / Navigation Bar Styling

Navigation Bar Styling

4 posts, 0 answered
  1. Eoghan
    Eoghan avatar
    1 posts
    Registered:
    06 Jun 2013
    13 Jun 2013
    Link to this post
    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
  2. Jonathan
    Jonathan avatar
    119 posts
    Registered:
    19 Dec 2012
    14 Jun 2013 in reply to Eoghan
    Link to this post
    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.rtsSelected{color: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:before{position: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:before{background:url(../Images/icons.jpg) no-repeat -71px -17px; }/*Home Nav Item Replace background URL with yourd*/
    ul.rtsUL li.rtsLI:nth-child(2) a:before{background:url(../Images/icons.jpg) no-repeat -124px -17px; }/*First Nav Item*/
    ul.rtsUL li.rtsLI:nth-child(3) a:before{background:url(../Images/icons.jpg) no-repeat -71px -70px; }/*Second Nav Item*/
    ul.rtsUL li.rtsLI:nth-child(4) a:before{background:url(../Images/icons.jpg) no-repeat -71px -192px; }/*Third Nav Item*/
  3. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    17 Jun 2013 in reply to Jonathan
    Link to this post
    @Telerik

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

    Markus
  4. Sebastian
    Sebastian avatar
    1 posts
    Registered:
    02 Oct 2013
    14 Jun in reply to Markus
    Link to this post
    Yes this would be great!
4 posts, 0 answered