Submit a ticket My Tickets
Login  Sign up
Open navigation

How to Change the Color of your School's Hamburger Mobile Menu

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.

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 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.

Note: Some basic color names (e.g red, blue, black, pink, white, etc) are recognized and supported by the browsers without the need to use hex color codes. If you wish to add a more complex color you should use the color hex codes.

/*LearnWorlds team CSS*/
.lw-topbar-hamburger-button:after, .lw-topbar-hamburger-button:before {   background-color:XXX; }
.lw-topbar-hamburger-button:before{   box-shadow: 0 20px 0 0 XXX; }
.hamburger-open .lw-topbar-hamburger-button:before {   box-shadow: 0 0 0 0 XXX; }
/*end of LearnWorlds team CSS*/

3. Click on Update and then Save for the changes to be updated.

In our example, we chose the blue color and this is the final result.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.