How do I add additional text (e-mail address) near the menu?

Hi,

Add it as a menu item:

1. Go to your menu in Appearance / Menus;

2. Click on “Custom Links” on the left;

3. URL field: remove “https://” and insert “mailto:[email protected]” (without quotes and change the email address to yours);

4. Link Text: as you want it to look on the website, eg. “[email protected]”;

5. Add to menu and move it above other links, so it’ll show first, on the left.

Let me know if you have any troubles with it.

Cheers!

TibbyWeb

@tibbyweb Cheers! It worked like a charm. Thanks for that. Can you help me with something else please? Have you heard of font-awesome? I wanted to add an e-mail icon before it. Is this possible?

Cheers

BJ

Glad it helped! ??

Regarding the font awesome you can add it via CSS:

.onepress-menu li:first-child a:before {
  font-family: FontAwesome;
  content: "\f003";
  margin-right: 8px;
}

(for the bold envelope use \f0e0.)

This CSS will add the icon to the first menu item, so it will work as long as the email address will be always first.

The better solution would be to use the ID of the menu item (which I can’t know without seeing your page or you can check it yourself by using the inspection tool in your browser).

So if, for example, the menu’s item ID is 4783, then you could use this code:

#menu-item-4783 a:before {
  font-family: FontAwesome;
  content: "\f003";
  margin-right: 8px;
}

That would make the icon always attached to the email address.

Cheers again Tibby! The second CSS code worked. I have one more thing to ask you. If it’s too much trouble, maybe you can point me to a website I can read because I don’t know too much about CSS. how would I stack icons? i.e. This \f003″ (email sign) inside a fa-circle-thin icon?

Hi,

I’m not sure if you still need help with this, but here is a solution:

So instead of stacking icons probably it would be easier to add a rounded border.

Try this code (of course change #menu-item-4783 number to the one on your page):

#menu-item-4783 a:before {
  border: 1px solid #333333;
  padding: 5px;
  border-radius: 50%;
}

Increase the padding if you would like to make the circle larger.
To make the border ticker change border: 1px to 2px.

Let me know if it helped,

Cheers!

TibbyWeb

Cheers Tibby. It worked. However, the border seems a bit blurry. Is there any way to fix this?

Regards
BJ

Hi,

I tried the stacking icons method, but it doesn’t look any nicer – I had to make the size of the circle bigger than the envelope and as a result the circle became thick, like here:
https://www.tiikoni.com/tis/view/?id=361bebb

Maybe better would be to install some other icon pack with an envelope and a circle as a single icon.

If you install it, let me know, and I’ll try to figure out what code to provide to add it before the menu item.

Cheers!

TibbyWeb