is it possible to add images on main menu?
-
hi, is it possible to add images (eg fb logo) on the main menu like here for instance
The blog I need help with is: (visible only to logged in users)
-
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
-
thanks for that but I cannot find the menu item. Any help how to find it? I need it for this page
I can see the source code but no idea how to find the correct one to copy to css
-
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/
-
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
-
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?
-
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.
-
-
-
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?
-
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!
-
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?
-
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.
-
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
-
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 -
- The topic ‘is it possible to add images on main menu?’ is closed to new replies.