The topbar is literally a bar at the top of your school’s pages. It is visible to the logged out and logged in users (in case you choose so) and contains links (in the form of buttons) that can lead to various other pages of your school, your external website, your LearnWorlds blog, and so on. 


Your topbar is one of the first things someone sees when they visit your school. So, let’s take care of it! 


Navigate to Site Builder - Edit School Site -  Edit School Topbar:


Kindly note that you can edit the:

a) Before sign in/up topbar. The before sign in/up topbar, is addressed to users that have not signed up in your school or have logged out from their account. 

b) After sign in/up topbar. The After sign in/up topbar, is addressed to users that have already signed up in your school, authenticated themselves, and are logged in.

So, you can edit your topbar and the buttons according to each circumstance for the best marketing and navigational process that you want your users to follow!


If you want to use a different layout for your topbar, hover over the [< or >] icon on the right, and choose the layout you like the most. (Kindly note that this process can be done in both before and after sign-in, sign-up views)



How to use pre-ready button links


For your convenience, LearnWorlds has created premade button links, that you can drag and drop in your topbar! So no hard work will be needed on your part!


You can find all the settings for the pre-ready button links by clicking on the Header widget section, choose the button link you are interested in, and drag and drop it above by clicking on the 4 small dots. You can position the buttons anywhere you want.

How to create customized & submenu buttons


If you have a different strategy on your mind and you want to create unique buttons that do not already exist, you can do that, while you can also create submenu links in order to minimalize the appearance of your topbar and make it more attractive!


Click on the + icon and :

1 Change the text in the new element by renaming your button and clicking on the "Menu Link".

2 Add a submenu button by clicking on the + plus icon next to the pencil.

3 Edit the button's link and appearance, by clicking on the pencil icon.

4 Delete the button by clicking on the bin icon.

Regarding the editing of the Submenu button, the process is quite the same as the main buttons! If you want to add a variety of submenu buttons, all you need to do is click on the +icon of the main menu link, and the new element appears below to the original one:

How to edit links and the appearance of the buttons


After you have created your buttons and submenu buttons, you have reached the step where you want to add the redirecting links on your buttons. In order to start the editing of a button, you will need to click on the pencil icon as mentioned in the previous steps.


After the editing window appears, you can edit the "On click action" and add the link to the page you want this button to take the user to. All you need to do is click on the drop-down menu and all the choices will appear.

The Editing Link window pops up. Let’s add a link to a URL for now:

More information on our Edit link Manager can be found here and here.


Regarding the Appearance of your buttons, you can choose between the following choices and customize your buttons as you like!

Note that your topbar is not visible on mobile devices, as it adjusted to a "hamburger" menu.  Don't forget also that you can also choose which buttons to be visible in the Hamburger Mobile Menu view:


And there is more to the hamburger menu!


Our team has recently released a variety of features for those who love customizations in case the color the Hamburger Menu has doesn't fit with the rest of the school design!


You can make those changes with the following simple steps:


1 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 pressing "Hide" on the "Mobile Menu" in the right settings panel.

If you choose to hide your Hamburger menu then the mobile menu will not appear in your school. But don't forget that you can always have a custom topbar on a specific page! In case you would like your mobile menu not to be visible on a specific page. For more information on how you can have a custom topbar on a specific page, you can check this article.


2 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 clicking "Custom", and then select the color you prefer:

3You can also change the Link Text Color:

So the changes you will be making will correspond to the following mobile menu appearance:

And that’s it to the top bar! Super easy to set it up. Why not do it and save your school visitors time?