In LearnWorlds, users must sign up or log in to access course content. The platform includes a customizable topbar, which displays different options based on a user’s login status:
- Before Sign-in/Sign-up Topbar – Shown to users who haven't signed in.
- After Sign-in/Sign-up Topbar – Visible to logged-in users, offering personalized navigation.
This ensures a smooth user experience by providing relevant navigation options based on login status.
In this article, we will learn how to edit and customize your topbar, including adding buttons, modifying layouts, and adjusting settings.
Edit Your Topbar
Τo access the Topbar Editor, go to Website → Design → Edit Website.
Click on Edit School Topbar to access topbar customization options.
You will find two versions of the topbar:
- Before Sign-in/Sign-up Topbar (for logged-out users)
- After Sign-in/Sign-up Topbar (for logged-in users)
We recommend using different buttons for each view to make the navigation process easier. For example, the before sign-in topbar needs a sign-in button while the after login needs a sign-out button.
Recommended Buttons for the Before Sign-in/Sign-up Topbar:
- Home (Landing page accessible only to logged-out users)
- Sign Up
- Sign In
- Courses / Products Page
- Contact Us
- About Us
Recommended Buttons for the After Sign-in/Sign-up Topbar:
- After Login/Start (Accessible only to logged-in users)
- My Account → Profile → Inbox → Sign Out
- Courses / Products Page
- Ask Instructors / Tech Support
- Learning Apps (if enabled, e.g., Blog, Community, Daily News)
These are just suggestions; you can personalize your topbar by adding or removing buttons to suit your needs.
Add and Edit Your Logo
To insert a logo, click on the existing one in the topbar. Then, in the settings panel on the right, click Change under the Image options and upload your logo file.
Adjust the size, alternative text, actions, and layout as needed.
- The topbar logo is not automatically fetched from your school's Logo and Favicon settings. You must manually insert it.
- If you use alternative text instead of an image, you can change the background color in the Layout settings.
- To add a link to your logo, click on it and select Actions. Here you can check more information about on click actions.
Add Links to the Navigation Menu
There are premade topbar menu buttons available to help you achieve the desired result. You could drag-and-drop premade buttons for quick setup.
- Click on the Header widget section to access premade links.
- Drag and drop buttons into position using the dots.
- Remove any button by clicking on the bin icon.
You can also create Custom Buttons. Click on the + icon to add a new button.
- Rename the button by clicking on it.
- Edit the button’s link using the pencil icon or delete it using the bin icon.
Don’t forget that you can also create Submenu Buttons (Dropdown Menu). This helps keep your navigation clean and organized, especially if you have many links. To group related links under a dropdown menu:
- Click the + plus icon next to the pencil icon.
- Add and edit submenu items as needed.
Adjusting Button Layout
Once your topbar buttons and links are set up, you can edit the layout of the topbar menu.
Add Widgets
You can customize your topbar using multiple widgets. Click on the header widget option and select from the available choices.
You can add buttons, icons, social, mini-timers, headings, or text.
You can find more information about widgets, here.
Customize the Hamburger Menu (Mobile View)
The Hamburger Menu is the menu users see when they visit your school page on a mobile device. On smaller screens, your top bar is automatically transformed into a Hamburger Menu.
To enhance the user experience, you can customize the buttons displayed in the Hamburger Menu. Click the Edit button next to any link and choose your preferred settings.
Tips to efficiently customize your Hamburger Menu
1. Disable the mobile menu if 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.
2. Change the Hamburger menu icon.
3. 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.
4. You can insert a custom Link Text Color, a different one from the default Theme Explorer Colors.
- The Before and After Sign-in topbars also apply to the Hamburger menu.
- Some buttons (e.g., "Scroll into Page" actions) won’t function in the mobile menu. You can choose to hide these.
- If a submenu is added, the main dropdown button won’t be clickable—it will only expand the submenu.
Creating a Custom Page Topbar
You may want to customize or hide the topbar on specific pages, to create a unique experience for different sections of your website. Navigate to Page → Topbar & Footer and choose whether to use:
- Common topbar
- Custom page topbar
- No topbar at all
- Admin Preview: When previewing the topbar, admins always see the After Sign-in topbar (since they are logged in). To view the Before Sign-in version, log out or use an incognito window.
- Home Page Restrictions: The Home page cannot be linked in the After Sign-in navigation unless it is explicitly set as the After Login page.
- Built-in App Limitations: Certain apps (Inbox, Profile, Account) may have restrictions on custom topbars.