Mobile header

Hi @derlehre,

Yes, this is possible, and you don’t need any code for the icon itself. You can add it using the eLearning header builder:

1. Go to Appearance → Customize → Header.
2. In the builder panel, switch to the Tablet/Mobile view.
3. Click an empty spot in the header row and select HTML 1.
4. Open HTML 1, switch to the Code tab, and add:

<a href="https://yoursite.com/account/" aria-label="My Account">
    <i class="fa-solid fa-user"></i>
</a>

Replace the URL with your Masteriyo Account page URL. You can find this under Masteriyo → Settings → General → Pages → Account.

You can also adjust the Links colour in the HTML 1 settings so the icon is visible against your header. Then click Publish.

Visitors who aren’t logged in will see the login/registration form, while logged-in students will be taken directly to their account dashboard. You can also drag the icon within the header row if you’d like to position it differently.

If you’d prefer to hide the icon when visitors are already on the account page, you can add this under Appearance → Customize → Additional CSS:

.masteriyo-account-page .tg-html-1 {
    display: none;
}

Hope this helps!