Special Menu Item Format

[amer meknas]

Hello there…

putting the final touches on the site before getting the data in 🙂

I was wondering, how to format a menu item to look like the Donate link… I am thinking of adding a facebook link there so an F with a square around it might be sufficient… or just put the Facebook logo there )so image substitution…

I would appreciate the help 🙂

Thanks

[Bill Robbins]

Hello Amer,

Great questions. You can make any of the menu items appear like the donate link. In the WordPress navigation builder (Appearance > Menus) find the link you’d like to change. Click the down arrow on the right hand side of that link in your menu to open up its options. In the spot for CSS Classes, enter:

button

as the class and update your menu. That will cause that item to have a border around it like the donate one does.

If you need to use an icon in the menu, you might try using the Nav Menu Images plugin (https://wordpress.org/plugins/nav-menu-images/) which lets you upload an image for any menu item.

Let me know if you need any help.

Thanks,
Bill

[amer meknas]

ok so I did that, but for some reason the image is showing higher than the text… I tried adding a border to it so that to bring it down, but it went even higher… tried to make it smaller, but it seems to be still not centered… (seems to be top justified or if the bottom of the image is inline with the text)…

let me know if you can help with this or I can ask the developer or do some googling 🙂

thanks

[amer meknas]

btw, all I need to do is put a facebook link in the top menu like the one in the bottom 🙂

[Bill Robbins]

In this case the bottom of the image will be lined up with the baseline of the text. The image is a bit bigger than the text. If you look at the top of the logo it’s a good bit higher than the text by it. Since the border is added with padding, it causes the box to be taller as well.

I would take out the button class here. You can use this method to adjust the vertical positioning of the icon:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   li.has-image {
   	position: relative;
   	top: 4px;
   }
   

3. Update your settings.

See if that places it in the right spot. You can make the 4px larger to move it further down or smaller to move it up.

Have a great week,
Bill

[amer meknas]

that does make it look a tad better… 🙂

any way to make it look just like the social media mene 🙂 Thanks for the help and sorry for the many many questions 🙂

[Author]

Posts