In LearnWorlds, signing up and subsequently signing in are mandatory steps for users to access your course content. Therefore, we provide distinct top bars for logged-out and logged-in users. You will find more information here.
Go to Website → Edit website, and click on Edit School Topbar. You can edit the following:
- Before sign in/up topbar: addressed to users that have not signed up in your school or have logged out from their account.
- After sign in/up topbar: addressed to users that have already signed up in your school, authenticated themselves, and are logged in.
Note: When previewing the top bar by clicking on Preview, admins will view the After log-in top bar version by default, since they are already logged in to the school so they will see the top bar a logged-in user sees. If you would like to preview the Before Sign in/up topbar, you need to visit your LearnWorlds school, while logged out from your admin account or visit your school via an incognito window or a different browser as a logged-out user.
Logo
To insert a logo, click on your logo (in the following example, a logo has already been inserted). In the side form that appears on the right side click on Change under the Image option to upload your image logo. You can also change your logo by clicking on the Edit option. Once you add your logo, you can adjust the size, insert Alternative text, and edit the Actions and Layout.
Notes:
- The logo of the Topbar is not automatically fetched from the Logo and Favicon page in your school, you need to insert it while editing the topbar.
- To change the background color of your logo in case you enter just Alternative Text instead of a picture, you have to click on Layout on the right-side settings panel, and in the Background color pick the desired color.
- You can also add a link to your logo. To do so, click on your logo, and click on Actions.
Add links to the Navigation Menu
Apart from your logo, you can also add links to your top bar and change the buttons' names accordingly. More information on how to edit your Buttons at your Topbar and how to create Submenu buttons can be found here.
Add Widgets
You can add any widget you wish to customize your Topbar. For more information check this article.
Hamburger Menu
1. Your top bar is adjusted to a Hamburger menu on mobile devices and screens.
2. You can choose which buttons to be visible in the Hamburger Mobile Menu view.
3. You can disable the mobile menu in case you would like to follow a different navigational strategy for your users, by clicking on your Topbar settings, and by choosing Hide on the Mobile Menu Setting.
4. Change the Hamburger menu icon.
5. If you want to have a different background color in your mobile menu in comparison with your school's Theme explorer, you can choose a color by enabling the "Custom" option in your Topbar settings.
6. You can also insert a custom Link Text Color, a different one from the default Theme Explorer Colors.
7. Choose if you want to use uppercase in the hamburger menu.
Notes:
- In the Mobile Hamburger Menu, buttons that have actions such as Scroll into the Page will not be functional. You can choose to hide those buttons from the Menu, according to step 2.
- If you have added sub-menus in your topbar navigation menu, the "head" element will not be clickable in the hamburger menu, and it can only be used to expand the drop-down menu.
Custom Page Topbar
You can have a common top bar, a custom top bar for some pages, or even hide the top bar on some pages, according to your preferences. Navigate to Page → Topbar & Footer and select whether you want your page to include a topbar.
Build-in apps like the inbox, profile, and account have limitations on having a custom topbar.