How to add graphics to main nav bar?

Home Pootlepress Academy Support Forums Academy Support Forum WordPress menus How to add graphics to main nav bar?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #7160
    Kim Young


    I would like to add an icon/graphic for each page tab in my main navigation bar — there would be an icon then type, e.g,  *(pretend this is icon/graphic) Home.  But I can figure out how, any assistance will be greatly appreciated. Is there some way to upload an image for each nav button – or add to CSS?  I am using Woothemes Canvas theme.

    Thank you very much!


    Jamie Marsland

    Hi Kim,

    Woothemes have a tutorial that may be some help with this


    Trish Mullen

    This is great Jamie and coincidentally, I’ve spent almost 2 days trying to find out how to do this and couldn’t see anything in the Canvas tutorials.  I even put a thread in the WP experts page on LinkedIn this morning asking if anyone could help.  This is brilliant, thanks so much

    Kim Young

    Perfect, Jamie!  Just what I needed!  Thank you SO much!


    HI Jamie,

    How can I add a gradient to my Canvas Nav bar. (it shows one in the default but disappears when changing the colour in admin).

    Much  obliged and happy xmas :)

    Jamie Marsland

    Hi Kenneth,

    You would probably need to target the nav element with some custom css. I will try and put some better instructions together, but here is the element.


    Woo Canvas – How to create a gradient for the navigation menu

    In custom CSS, create the following class:

    #navigation {}

    Now, to create your gradient, visit:

    After you mix your colours, paste the code as follows (example):

    /* navigation gradient */

    #navigation {
    background: #f01a25; /* Old browsers */
    background: -moz-linear-gradient(top,  #f01a25 0%, #b70e14 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f01a25), color-stop(100%,#b70e14)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f01a25 0%,#b70e14 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f01a25 0%,#b70e14 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f01a25 0%,#b70e14 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f01a25 0%,#b70e14 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f01a25′, endColorstr=’#b70e14′,GradientType=0 ); /* IE6-9 */

    Jamie Marsland

    Great tks Kenneth :)


    Hi there ken, the gradient works perfectly, only got one question left: i would like this menu to be a little transparant, any idea how i can combine these two?

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
Scroll to Top