Swapping nav text links for beautiful images!

Site: http://www.staffingbymiguel.ca

Theme: Suffusion

Hey guys n gals! Hope you’re having a great day! I have a challenge for you!

I am trying to swap those nasty a$$ text menu links for some .png images I’ve created for my three main pages: Home, Services, and Contact Us.

Currently, I created a visually appealing menu just by adding some links to the images and building it on each page using Visual Composer, but I want to use the native wordpress navigation so that its correct. My end result will be that the upper menu (native wordpress navigation) will look identical to the mockup I created below it.

I created the standard wordpress menu, and then added some custom code I got from you guys in:

appearance>suffusion options>backend>custom includes (where I store my css overides).

Here’s what the code looks like:

#menu-item-326 a {
display:block;
height:128px;
width:397px;
background:url('http://staffingbymiguel.ca/wp-content/uploads/Home.png') no-repeat center 0;
background-color:black;
text-indent:-9999px;
}

The code works, but it looks like suffusion has overridden it with some weird functions where the page you’re on is orange (and the png is hidden), and it has a default background colour of white/grey even though we specified black in the code.

I got all brave and decided to make some changes myself, so I tried adding this and it didn’t work at all

`#menu-item-326 a:highlighted, #menu-item-326 a:visited, #menu-item-327 a {

display:block;

height:128px;

width:397px;

background:url(‘http://staffingbymiguel.ca/wp-content/uploads/Home.png&#8217:wink: no-repeat center 0;

background-color:black;

text-indent:-9999px;

}

#menu-item-326 a:hover {

background-color:grey;

}`

I think I’m on the right track, but I cant find out where its being overridden. I know its a pain, but I have enabled access to my backend and would really appreciate it if you could take a look through wordpress for me!

Thanks a million! You guys are the best!