is it possible to add images on main menu?

9thartwave · Member · Dec 5, 2013 at 2:28 pm
Copy link

Add topic to favorites
hi, is it possible to add images (eg fb logo) on the main menu like here for instance

http://hitomikammai.com/

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Dec 20, 2013 at 8:38 pm
Copy link
You can use an image replacement technique for that. Here is an example:
```
.menu-item-547 a {
	text-align: left;
	text-indent: -9999px;
	background: url("http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png") no-repeat;
	width: 32px;
	height: 32px;
}
```
Notice that it begins with “.menu-item-547”. That is the unique class name given to the contact menu item in your site’s main menu.

To change the menu item text to a logo for other menu items you need to:
- View page source and find the unique class name for the menu item you want to adjust
- Change the menu item part of the selector
- Add the image you’d like to use inside url()
- Update the width and height values to match your image’s width and height
9thartwave · Member · Dec 23, 2013 at 10:15 am
Copy link
thanks for that but I cannot find the menu item. Any help how to find it? I need it for this page

http://9thartwave.com/fb/

I can see the source code but no idea how to find the correct one to copy to css
kathrynwp · Staff · Dec 23, 2013 at 8:20 pm
Copy link
It is menu-item-4140

You can find the code for other menu items by referring to the guide Sheri gave you earlier:

http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
9thartwave · Member · Dec 24, 2013 at 12:10 am
Copy link
thanks…is it possible to connect a link to the page? I mean I want to put the fb button and when smo presses on it to be directed to my fb page
9thartwave · Member · Dec 24, 2013 at 12:19 am
Copy link
I created the FB link on the menu, but how can I add the image now? again not able to find the menu item…in the inspect element there are too many info. Where exactly shall I look at?
joelwills · Staff · Dec 26, 2013 at 9:13 pm
Copy link
Hi there!

The menu id for your the FB link is “.menu-item-4164”. Using the guide and instructions previously sent to you, the text can be replaced with an image using this CSS class.

Let me know if you have any further questions.
9thartwave · Member · Dec 27, 2013 at 12:17 am
Copy link
what about the menu id for the TW link?
joelwills · Staff · Dec 27, 2013 at 1:26 am
Copy link
That’s .menu-item-4170

I see the FB one looks great!
9thartwave · Member · Dec 27, 2013 at 1:53 am
Copy link
perfect thanks…last question, is there a way to decrease the space just between the fb and twitter images in the menu bar? If not how can I decrease the space between all menu items?
joelwills · Staff · Dec 27, 2013 at 2:03 am
Copy link
Yes, you can do that by doing
```
li.menu-item-4164 {
margin-right: 0!important;
}
```
That removes the margin to the right of the FB icon. IF you need to remove the margin to the left of the Twitter icon as well then add:
```
li.menu-item-4170 {
margin-left: 0!important;
}
```
I hope that helps!
9thartwave · Member · Dec 27, 2013 at 9:36 am
Copy link
perfect, many thanks…I was wondering, is it possible to make the same to my other blog?

panosantonopoulos.com

I mean to put the fb and twitter icons on the right of the search box, or to delete the search box and put them there?
joelwills · Staff · Dec 27, 2013 at 9:11 pm
Copy link
Hi there!

You can certainly use CSS to hide the search box and position other menu items over to the location the search box was in. This could be a lot of CSS work so if you need to hire a consultant to help you with in-depth design work or large CSS revisions, please consider getting a quote from Tweaky:

http://en.support.wordpress.com/customize-my-site/request-theme-customization/

You can replace the text with icons in the same way as Sheri explained, looking at the source and finding you the unique class name for the relevant menu item.
9thartwave · Member · Dec 27, 2013 at 9:39 pm
Copy link
I see…can you tell me then the menu items for the two links I added in the secondary menu (FB & TW) in panosantonopoulos.com?

thanks again
timethief · Member · Dec 27, 2013 at 10:01 pm
Copy link
You first posted for CSS editing help on this site http://9thartwave.com/ which you purchased a custom design upgrade for.
Now you are asking about http://panosantonopoulos.com/ which also has a CSS upgrade. however, all CSS editing is theme specific editing. Start a new thread for the second theme which is Imabalance2 please by clicking this link > https://en.forums.wordpress.com/forum/css-customization#postform
timethief · Member · Dec 27, 2013 at 10:01 pm
Copy link
oops! Imabalance2 = Imbalance2

No items found.