Change Nav Menu Text to Pictures

  • UDK450

    #1532

    I am currently using the Graphene theme on my WordPress site. We really like this theme, as it looks very professional, yet casual. (Thanks!) However, it has been decided we are going to change the text to pictures. I have been able to do this using Firebug. Of course, WordPress does not use a html file for this persay, thus complicating this otherwise easy process. I have searched for it in header.php, but found that what I think I am looking for is in the functions.php file.

    http://pastebin.com/vEfmwdqw

    Originally $prepend = <strong></strong> and $append = <strong></strong>, which i assumed outputted the tags Firebug for Firefox showed when viewing the html of the text. By changing it to what i did, i assumed it what input the name of the page into the <img /> tag, allowing me to reference the img for that page, and replacing the text with an image. However, it still shows up as if I’ve never made any changes. My website is http://www.fantasycraft.byethost13.com/site/ . If you could help me, it would be very much appreciated!

    Admin

    Syahir Hakim

    #16167

    I think the easiest way to achieve this is simply to use CSS to hide the text, and then apply the image you want as a background image. Something like:

    #header-menu > li > a > strong {
    display: none; /* This hides the text */
    }
    #header-menu > li.page-item-4 > a {
    background: url(path/to/image.png) no-repeat; /* Apply background to the Home menu item */
    }

    UDK450

    #16168

    OK. Well I have now done that. But it still messes up on the page you are currently on. It does not show the image if you are on that page. What could be causing this?

    Admin

    Syahir Hakim

    #16169

    Try placing !important after the background declaration:

    #header-menu > li.page-item-4 > a {
    background: url(path/to/image.png) no-repeat !important;
    }

    UDK450

    #16170

    Well, it works when I use it in firebug, when I put it in style.css, it doesnt change anything. Unless my uploading isn’t working right again…

    UDK450

    #16171

    Nevermind, it’s working now! Thanks so much for your help. Love your theme!

    UDK450

    #16172

    Again, thanks so much for the help!

Viewing 7 posts - 1 through 7 (of 7 total)

  • You must be logged in to reply to this topic.