Your LearnWorlds school is mobile-friendly and fully adaptive to different device portraits other than desktop/laptop. When the users use their mobile devices to log in to your school, your school's topbar turns into the Hamburger Menu for an optimal experience.
Change the Color
In this article, you can find out more information on how to change the color of your school's Hamburger Menu. By default, the hamburger mobile menu has a grey color:
You can change its color by adding the script below in the Custom Code of your school:
1. Go to Site Builder → Site → Site Custom Code.
2. In the Site custom code and under the <style> Dynamic (CSS) and <style> (css) for built in pages (i.e social, profile, workpad, my account), add the script below. You will need to replace the XXX fields with the color hex code (Hexadecimal color values) or the name of the color you wish for your hamburger menu.
Some basic color names (e.g., red, blue, black, pink, white, etc.) are recognized and supported by browsers without using hex color codes. If you wish to add a more complex color, you should use the color hex codes. If you add the color hex code, ensure that you add the symbol # before the hex code (e.g., #ae140c)./*LearnWorlds team CSS*/
.lw-topbar-hamburger-button:after, .lw-topbar-hamburger-button:before {
background-color:XXX !important;
}
.lw-topbar-hamburger-button:before{
box-shadow: 0 20px 0 0 XXX !important;
}
.hamburger-open .lw-topbar-hamburger-button:before {
box-shadow: 0 0 0 0 XXX !important;
}
/*end of LearnWorlds team CSS*/For the built-in pages (Community, Profile, etc) you will need to add a !important after your selected color, under the <style> (css) for built in pages (i.e social, profile, workpad, my account).
3. Click on Update and then Save for the changes to be updated.
In our example, we chose the blue color:
Change the Font Size
If you wish to change the Font Size of your school's Hamburger Menu, add the below script in the Custom Code of your school:
1. Go to Site Builder → Site → Site Custom Code.
2. In the Site custom code and under the <style> Dynamic (CSS), add the script below. You will need to replace the XXX field with the number you want for your font size.
3. Click on Update & Save.
/*LearnWorlds team CSS*/
.mobile-nav-menu-link{
font-size: XXXrem;
}
/*end of LearnWorlds team CSS*/