Go to Site Builder → Edit School Site, and click on Edit School Topbar. You can edit the following:
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.
To insert a logo, hover over Your Logo (in the following example, a logo has already been inserted), and 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.
- The logo of the Topbar is not automatically fetched from the Logo and Favicon page in your school, you need to insert it.
- 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 in your Topbar and how to create Submenu buttons can be found here.
You can add any widget you wish to customize your Topbar. For more information check this article.
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. 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.
5. You can also insert a custom Link Text Color, a different one from the default Theme Explorer Colors.
- 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 submenus in your topbar navigation menu, the "head" element will not be clickable in the hamburger menu, and it is only be used to expand the dropdown 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. For more information, check this article.
Do not forget to save your changes by clicking on Save & close. If you were trying various layouts and appearances in your topbar and do not wish to save those changes, click on the Discard & exit.