The Site Builder offers plenty of editor features for you to create the most stunning pages. In this article, we are going to learn how to create and customize the top bar of your pages. The Top bar is the first part of all your pages that users see before logging in to your school. You can add your logo and a menu with custom links.


1 Navigate to “Site Builder” from your admin menu “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.


2 To insert a logo simply hover over "Your Logo" ( in the following example a logo has been already inserted), and click on the "Change" under the "Image" option to upload your image logo. You can also change your logo by clicking on the "Edit" option. 



 

3Once you add your logo, you can adjust it through the panel that appears, such as Size, inserting only Alternative text, redirecting Actions, and Layout.



4 In order to change the background color of your logo in case you enter just Alternative Text, instead of a picture, you simply have to click on the Layout in the settings panel, and in the Background color pick the desired color.



5In this step, you can add a link to your logo. To do so, click on your logo, and click on "Actions". For more information on which on click Actions to use, you can continue to step 6!




6Apart 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 in your Topbar and how to create Submenu buttons can be found here.


So, all you need to do is to click on the button you wish to insert a link to, click on the pencil icon, and then choose where the link will redirect the user, in the window that appears.




To further see how you can add links to buttons and in general elements in your sections and pages simply follow this link.



7 Don't forget to click on the "Save" button otherwise your changes will be discarded. 



a) To see your changes, simply click on the "Preview" button after you have saved your Topbar.  


 

b) If you want to leave the settings of the Topbar and navigate to your pages, simply click "Save & close".


c) If you were trying various layouts and appearances in your topbar, and do not wish to save those changes, simply click on the "Discard & exit".


Show topbar option - Custom Page topbar:


But what about having a different marketing strategy on your mind and you do not want your topbar to be visible in some, or even most of your pages? Worry not! Our team has created a setting just for you!


a) First of all, you need to navigate to the School Page that you want to adjust the topbar.

b) Hover over "Page".

c) Click on "Page Properties.


d) "Show top bar" Option will appear in your Page Settings! 



i) If you do not wish to change your top bar, as you prefer to keep the same one as you have originally created, then select "Common Site topbar":

ii) If you want to adjust your page according to your marketing ideas or different strategies, you can click on "Custom page topbar" and then you will need to edit your topbar as you desire for this specific page only! 



iii) If you are not happy with the 2 previous choices and you just don't want your topbar to be visible on that specific page in your school, then click on "No topbar at all":





After you make your changes in the Settings panel, do not forget to click save! The most important step of them all :) 


If you would like to learn how to edit the topbar for your Mobile Menu as well, you can find all the detailed information in this article. If you need any help on customizing your topbar, our Suppor Team will always be at your disposal!