Need help? Check out our Support site, then


Turning navigation text into images...help!!!

  1. Ok, so Im a complete newb to this. What I want to do is instead of having text navigation links (like Home and Business, etc..) I want to have images to click - instead of "Business" people would click on the image of a business man, etc..). I kniow enough about basic html to this, but because Im using a theme, I dont have access to the html (btw, that statement is true, right?). But I do have access to the css. So after many hours of searching, Ive finally found the part of the CSS that controls said text links. Anyone have any code I can put in (and alter to make my own obviously) that would make those an image? This is what I see right now (but what do I need to do to add an image instead?):

    #nav {
    background:url('images/border.gif') repeat-x top;
    border-bottom:1px solid #fbfbfb;
    display:block;
    float:center;
    margin:0 auto;
    padding:0;
    width:100%;
    }

    #nav ul {
    font-size:14px;
    font-weight:bold;
    list-style:none;
    margin:0;
    padding-left:0;
    text-transform:uppercase;
    }

    #nav li {
    float:left;
    position:relative;

    The blog I need help with is needmeetsfix.wordpress.com.

  2. Correct, you do not have access to the theme's HTML.It is possible to do what you want though will take some testing on your part.

    First, upload the image that you would like to use for a particular link. You'll have to find out the dimensions of the link as each one is going to be different.

    Once the image is uploaded, go into your CSS and add the following for each link in your menu.

    #nav .menu .page-item-2 {
        background: url('http://0.gravatar.com/avatar/e00501bf782b42d5db19ff75fca14f6a?s=128&d=mm&r=G') no-repeat center;
    }

    The page-item-2 is in reference to the current BUSINESS link on your site.

    Dog = page-item-11
    Mother = page-item-4
    Musician = page-item-9

    So on and so forth. That should get you started. If you try that out and need more help feel free to reply back and I'll see if I can help.

  3. hmmm...didn't work. The image is being hosted in my wordpress library so Im using the link it provides. Not sure why this isnt working. Ive tried everything and nothing! Does it matter where in the code I place the above? Anywhere in relation to the main #nav in particular?

    Thanks so much for replying btw, it is much appreciated :)

  4. Are you using the direct img url when inputting it into the above code?

    Something like: http://needmeetsfix.wordpress.com/2012/06/link-image-1.jpg

    I just tried the above code I gave using the Chrome Developer Tools and it puts my avatar image as the background for your Business link.

  5. This is what Im using:

    #nav {
    	background:url('images/border.gif') repeat-x top;
    	border-bottom:1px solid #fbfbfb;
    	display:block;
    	float:center;
    	margin:20px auto;
    	padding:20px;
    	width:100%;
    }
    #nav .menu .page-item-2 {<br />
        background: url('http://needmeetsfix.files.wordpress.com/2012/06/smalltbm-e1339288152434.png') no-repeat center;
    }

    Should i not be using both #nav's??

  6. No you can use both #navs. The first one just applies to the main container while the second one targets the particular link.

    Looking at your CSS in the developer tools I think I spot an error. Could you check out

    #nav .current_page_item a {
    	background:lefturl('http://needmeetsfix.files.wordpress.com/2012/06/smalltbm-e1339288152434.png') no-repeat100px#e2dbd1;
    	color:#cc4d22;
    }

    in your CSS code for me to see if that does in fact exist? I want to make sure it just isn't an issue on my end as the above piece of code needs some fixing.

    That may be causing part of the issue. The above piece of code should look like

    #nav .current_page_item a {
    	background: #e2dbd1 url('http://needmeetsfix.files.wordpress.com/2012/06/smalltbm-e1339288152434.png') no-repeat;
    	color:#cc4d22;
    }
  7. jarretcade, you were right, it did have that code. So I swapped it with the second batch of code you mentioned, but alas, it didn't fix it.

    Seriously, what the h*ll is going on here!! :)

  8. Lets try something really simple, try out the following in your CSS at the very bottom of the code.

    .page-item-2 {
         background: red;
    }

    Let me know if that changes the background color for the Business link.

  9. Didn't work :(

  10. Weird, you have the custom CSS upgrade right?

  11. Yup. that's how I can access the CSS in the first place. I think it cost about 30 bucks...

  12. Are you sure your custom code is saving? I know you mentioned a few responses back that you had switched out the #nav .current_page_item a code with the updated version that I gave you but upon checking your CSS the old code is still there.

  13. I checked http://needmeetsfix.wordpress.com/ and I see the background images working right now. I noticed you selected the "replace everything with my own CSS" option on the Appearance → Custom Design → CSS page, and then you duplicated most of the CSS from the original theme. You don't need to do that and it makes it a littler harder to debug your custom CSS. The better option would be to select the "Add my CSS" option and then just past the CSS for things you want to modify to the CSS editor area.

    I looked at your custom CSS and I see you have set them up like this:

    #nav li.page-item-11 {
    	background:url('http://needmeetsfix.files.wordpress.com/2012/06/chef2091.png') no-repeat;
    	width:150px;
    	height:230px;
    }

    Instead of setting the background on the li element, I would set it on the actual link and then make the size of the link match the image size. That way, the entire image will be clickable. You will also want to also set a rule (or use the same rule) for the :hover to get rid of that beige overlay that's covering the image when you mouse over it. I think it would be nice to have zero margin and padding since your images have spacing built in, but of course you can adjust that if you like. And last, I right aligned the text which looks like it will work well for short menu item names. Here is an example for you to try out:

    #nav li.page-item-11 a,
    #nav li.page-item-11 a:hover {
    	display: block;
    	text-align: right;
    	padding: 0;
    	margin: 0;
    	background:url('http://needmeetsfix.files.wordpress.com/2012/06/chef2091.png') no-repeat;
    	width:122px;
    	height:230px;
    }

    If you like it, copy that block and update the "page-item-11" class name and the url() value for each menu item.

Topic Closed

This topic has been closed to new replies.

About this Topic