Add image to menu item in CSS

benjamcmuffin · Member · Dec 16, 2011 at 1:38 pm
Copy link

Add topic to favorites
Currently, I have created a background image that I have placed above my menu such that it appears that there is an image for each menu item. Is there a way that I could just have an image attached to each menu item? I would like to be able to change the image when the menu item is selected, or on rollover. Thanks in advance for any help!

The blog I need help with is: (visible only to logged in users)
timethief · Member · Dec 16, 2011 at 9:38 pm
Copy link
I cannot help with CSS editing but you do need to read this section and restore the footer links:

May I remove the ‘Blog at WordPress.com’ credit in my site’s footer?
Although the Custom Design Upgrade certainly grants you the capability to hide the credit from your site’s footer, you are not permitted to do so. Even our VIP bloggers are required to maintain the credit. http://en.support.wordpress.com/custom-design/#frequently-asked-questions

Please be patient while waiting for the Volunteer who regularly helps with CSS gets to this thread.
thesacredpath · Member · Dec 16, 2011 at 10:20 pm
Copy link
There is a way of going this with linked images put into a text widget where basically the text widget contents end up being the top menu, but it is messy if you ever need to do any additions or editing.

There is another way I’m thinking about, but in those cases the text menu links would end up staying and then the text and the image would become the link. I’ve not yet actually tried this, but I’m pretty sure it can be worked out. Again though, any additions or changes to the menu would require considerably more work.

Make a pair of sample images, one of them the non-hover and one the hover and the upload them to the media library and post the URLs of those images here. They should be about the width of an existing menu tab.

I’m a little busy right now with clients, so it might be a few days before I get a chance to work on this though.
benjamcmuffin · Member · Dec 17, 2011 at 1:04 am
Copy link
@timethief, thank you for alerting me about that! It was not an intentional infraction on my part. It would be great if links to that or anything else that is not allowed would be included in the section where the CSS can be modified so people don’t unintentionally break rules like that. I modified things a bit so that it fits with the look and feel of the rest of the site—hopefully it is ok now.

@thesacredpath, thank you for your information. If it is complicated, don’t worry about it too much right now. I was looking to see if there was a simple way to do it. I have done some searching and think I found a good model to explore. Thanks for the response!
thesacredpath · Member · Dec 17, 2011 at 2:40 am
Copy link
You are welcome.

It isn’t necessarily complex to do, but any changes or additions later on require trips to the CSS for those changes or additions. Each tab or menu item has to be specifically targeted by ID# and styled individually.
benjamcmuffin · Member · Dec 17, 2011 at 3:00 pm
Copy link
I think I’ve just about got it. The problem I have now is that somehow there is a bunch of space that is added between the menu items, and I can’t figure out for the life of me how to remove it. I’ve left it up so you could see it.
thesacredpath · Member · Dec 17, 2011 at 5:37 pm
Copy link
Two things:

You have the width in #menu set at 695px where it should be 800px so it fills the width of the container. This takes care of most of the issue.

Second, add the following to your CSS to take out the left/right margin between the menu items.
```
#menu a {
margin: 0;
}
```
thesacredpath · Member · Dec 17, 2011 at 5:41 pm
Copy link
Better yet, do this so you can adjust the width to it fills the area.
```
#menu a {
margin: 0 6px;
}
```
BTW, nice use of an image sprite too.
thesacredpath · Member · Dec 17, 2011 at 5:53 pm
Copy link
Typo: …till it fills the area.
benjamcmuffin · Member · Dec 17, 2011 at 6:46 pm
Copy link
That was perfect! Thank you so much for all your help.

One last thing (I feel so needy—sorry!). My final menu item is displaying a portion of the rollover section of the sprite. It seems like instead of using the height of 140px that I defined in #menu and adding padding or something simliar to the bottom, it is actually using more of the image to create the padding. Is there a way to correct that?
benjamcmuffin · Member · Dec 17, 2011 at 6:51 pm
Copy link
Never mind, I got it. I changed the following:

#menu a { margin:4px 6px; padding:0; }
thesacredpath · Member · Dec 17, 2011 at 9:52 pm
Copy link
Nice job. I really like what you’ve done with your site. It’s clean, and the images in the menu add interest and whimsy (something I welcome in this befuddling world we live in).

:-)
benjamcmuffin · Member · Dec 18, 2011 at 5:11 am
Copy link
@thesacredpath, thank you so much for the kind words. I appreciate your lightning-quick responsiveness and help in improving my site. I’m sure I’ll have more questions soon! :)
thesacredpath · Member · Dec 18, 2011 at 5:29 am
Copy link
You are welcome and you know where we are.

No items found.