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') 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!

  • Michael Bissett

    Hey @rc_snowboarder! :slight_smile:

    In this case, you'll want to add the !important parameter to the background & background-color properties:

    #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') no-repeat center 0 !important;
    background-color:black !important;
    text-indent:-9999px;
    }
    
    #menu-item-326 a:hover {
    background-color:grey !important;
    }

    Could you try making that change inside your site please, and seeing if that helps? I'd have entered it for you, but I didn't see the site you mentioned as being associated with your account.

    Please advise,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.