The topbar is the main navigation area of your LearnWorlds site. It adapts based on whether a user is logged in, helping you show the right actions and links at the right time.
You can fully customize the topbar, add buttons, change layouts, update your logo, and tailor the experience for both desktop and mobile.
Topbar versions
LearnWorlds includes two topbar views:
- 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.
Using different buttons for each view improves usability. For example:
- Recommended buttons for the Before Sign-in/Sign-up Topbar: Sign In, Sign Up, Courses / Products Page
- Recommended buttons for the After Sign-in/Sign-up Topbar: My Account, Sign Out, After Login/Start, Learning Apps
These are just suggestions; personalize your topbar by adding or removing buttons to suit your needs.
Edit your topbar
Τo access the topbar editor, go to Website → Design → Edit website.
Click 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)
Add and customize 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.
You can also use the AI option to generate an image. A prompt box will appear where you can describe what you want to create or modify. Once you’re happy with the result, you can insert the image, and it will be saved in your image gallery.
- 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 and edit menu links
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.
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.
- Elements with applied effects (e.g., custom buttons with entrance animations) cannot be rendered in the hamburger menu.
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.