There are many ways in which you can create a personalized experience for your online school members.

In this article we'll have a look at how you can recreate this exact menu for your students:

We've created this with the help of the "Custom Menu" element, that has been customized in such a way that it displays the log in button only when the student is logged out. Then, after logging in, the menu will change and will display the log out button and the user account details (such as the courses to which they have access, and account details).

First, access Thrive Apprentice from the Thrive Dashboard:

Then, click on the "Design" tab of your navigation bar:

Edit the currently active design and access the template editor:

Look for the "Default School Homepage" template and access it:

Note: In case your homepage does not have a custom menu added to it by default, inside your page header, you can always add it from the right sidebar list of elements.

Alternatively, you can go through the quick start wizard of you online school (from the same "Design" tab that you were previously on):

This is where you will be able to customize the menu that's placed within your online school header:

Back to the school homepage template, here's how to start customizing the menu. First, select the header and click on "Edit", to start working on it:

Then click on the "Custom Menu" element, if your header has one, or simply add it from the right sidebar list of elements:

Create your menu structure, as it follows:

If you would like to learn more about this element, make sure to check out this guide from our knowledge base:

Let's start by renaming the first menu item:

Then, proceed with adding a target URL. You can simply look up your designated log in page in the search field:

Lastly, make sure you are displaying this menu items when the users are logged out:

We have a separate article in our knowledge base that explains how you can create menu items that are only visible for logged in users:

Click on "Apply" to save your changes:

Next, let's set up the log out menu item. First, rename it:

You'll next have to set up the action that will be performed when this menu item is clicked. For that, access the "Dynamic link" options:

In the first drop-down list select "Site":

And lastly, in the second drop-down, make sure you select the "Logout" action:

Feel free to use the additional features that show up when you select this option, and lastly, don't forget to complete the action by clicking on "Insert":

As far as when to show this new menu item, we want to show it when people are logged in:

Click once more on "Apply" to save your changes:

As per how we have set this up until now, when someone is viewing the menu, only one of these two menu items will be displayed, depending on whether that person is logged in or not.

Now let's see how to add and customize the "My account" top-level menu item.

Start by renaming your last top-level menu item:

And make it visible in those instances when the users are logged in:

Save your changes:

At this stage I'll proceed with renaming my sub-menu items as well. These menu items will have links attached to them, that will redirect the students to their profile page and to their course page.

The first sub-menu item will be the "My profile" one:

Add a link to it - in this case I've already created a "My profile" page that I will look up in the search field:

If you want to learn how to create such a page, then this article from our knowledge base might come in handy:

Make sure it's displayed when the user is logged in:

Save your changes:

Now let's customize the "My courses" sub-menu item:

This one can be linked to the course index page, for example:

When landing on that index page, the users can use the filtering options to sort their courses based on status, progress, topic, etc.

Make sure this menu item will be visible only when the user is logged in:

And lastly, click on "Apply":

Let's say we also want to display the user profile image in the menu.

I will shortly go over the steps for achieving this, but if you want a more in depth guide, then check out this article:

First, make sure your top-level menu item is unlinked from the group styling feature. For that, you need to select the "My account" top-level menu item, and then click on the green lock that shows up:

By doing this you are making sure that you are editing only this top-level item and that only this item will display your user profile image.

Next, open the "Display" drop-down list:
​

Select one of the two last options available in this list:

Then proceed with clicking on the actual image that appears in your top-level item:

Select the dynamic source in the left sidebar:

Open the drop-down list and select "User image":

The image of the logged in user should appear instantly in your menu:

While you are still here, you can use the left sidebar options to customize the image itself. For example, I've expanded the "Borders & Corners" section and increased the corner radius to 100px:

Now my user profile image is rounded:

Because I am logged in at the moment, my profile image will show up here. However, this will change for each user that is logged in, as this image is a dynamic one.

With all this set up, you've managed to create a fully customized user menu, tailored to their needs. The menu will not only display the log in and log out buttons depending the user status, but it will also display the name and image of each logged in user individually.

Here's how the menu looks for the not logged in user:

And here's how it changes after the user logs in:

I really hope you found this guide useful and easy to follow. As always, don't hesitate to rate it with a smile below, if that was the case, and make sure to check out our knowledge base if you want to learn more about our products: