replace text in nav menu with image

  • I have created a theme from mixing a couple of themes together to create a custom theme and css etc. It is based mainly on the twentythirteen theme with changes here and there.

    I was wanting to replace the headings in the navigation bar with images instead, and have it so that the text appears when you hover over the image. I am unsure of how to go about it as I’m fairly new to php, and if it was html would know exactly how to do it. Can anyone point me in the right direction?

    By the way, the images would be image files I have created myself, not icons or font elements as I have looked around for some tutorials but they dont say how to use your own images.

    Site link: smattering.com.au

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi!
    Do you know how to add css classes to your menu items?
    Go to Menus, then click Screen options, and check CSS Classes under Show advanced menu properties.

    Give your menu items (links) a unique class name, and then add your image
    and hover functionality to each link in your stylesheet.

    Thread Starter tophiebearrr

    (@tophiebearrr)

    Thanks for youre help, I didnt realize it was that easy. In regards to the styling, how exactly should I set up the hover funtionality with css so that the text only appears on hover, and not on top of the image?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘replace text in nav menu with image’ is closed to new replies.