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?

This topic contains 8 replies, has 5 voices, and was last updated by How to add graphics to main nav bar? 1 Frano 5 years, 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #7160
    How to add graphics to main nav bar? 2
    Kim Young
    Member

    Hello,

    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!
    Kim

     

    #7175
    How to add graphics to main nav bar? 3
    Jamie Marsland
    Keymaster

    Hi Kim,

    Woothemes have a tutorial that may be some help with this http://support.woothemes.com/knowledgebase/articles/92475-replace-menu-item-with-an-icon.

    Jamie

    #7180
    How to add graphics to main nav bar? 4
    Trish Mullen
    Member

    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

    #7212
    How to add graphics to main nav bar? 2
    Kim Young
    Member

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

    #7409
    How to add graphics to main nav bar? 6
    ken
    Member

    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 :)

    #7412
    How to add graphics to main nav bar? 3
    Jamie Marsland
    Keymaster

    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.

    #7416
    How to add graphics to main nav bar? 6
    ken
    Member

    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:

    http://www.colorzilla.com/gradient-editor/

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

    #7422
    How to add graphics to main nav bar? 3
    Jamie Marsland
    Keymaster

    Great tks Kenneth :)

    #14332
    How to add graphics to main nav bar? 10
    Frano
    Member

    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.