How to add user profile photo/avatar & display name to my site header?

Show display name on a menu item

Using our short tags allows you to show a user’s name in the menu instead of the name of the page. Instead of showing user or my profile in your site’s menu you can instead make the user page show the logged in user’s name (e.g John Doe). You can add the following short tags to the menu link: {first_name} {last_name} {username} {nickname}. To use this feature you simply add the short tags to the menu item’s navigation label like so:

Show user profile photo in menu

You can also show the user’s profile photo in the menu using the short tag: {user_avatar_small}. If you add this tag into the navigation label field the profile photo for the user will show. 

Note: You need to know how to use CSS to use the avatar in site header as due to every theme styling headers differently. Only add the avatar to site header if you know how to adjust position of avatar using CSS.