If you really love to customize your working environment then you may want to change even the slightest detail in your school. In order to change the color of your central menu you simply have to let Custom CSS do it for you.

1 Go to the admin menu and select Appearance.

2 Since you are changing the appearance of an "internal element" (any element inside your shool), select the first "Built-in pages" tab.

3 There click on "Main navigation panel background color", copy the respective snippet and paste it in the text editor , as shown below and replace the color code with the one you want.

There are so many colors, so why not have the choice to pick the one you like the most?

You can change the central menu in any color you desire, simply by changing the color code (eg. #e1bc2e) to the desired one in the  source code: 

.nav-tile-app-box {background-color: #e1bc2e !important;}

-Use the !important declaration in order to overwrite other CSS stylesheets.


Note: In case you prefer to have a different color for each app icon then just paste instead the following code snippets with the addition of the appropriate color.


    
/*home*/
#home.nav-tile-app-box {background-color: X;}
 
  



/*daily news*/
#dailyNews.nav-tile-app-box {background-color: X;}
 
  



/*community*/

#socialize.nav-tile-app-box {background-color: X;}
 
  


    
/*best resources*/

#wwworkPad.nav-tile-app-box {background-color: X;}
 
  
    

/*profile*/

#mirror.nav-tile-app-box {background-color: X;}


/*inbox*/

#communicate.nav-tile-app-box {background-color: X;}

  



/*people*/

#people.nav-tile-app-box {background-color: X;}

  



/*signout*/

#signout.nav-tile-app-box {background-color: X;}

  




























































  































4 Press "Save" when done.





























































5 Then select back in the menu "Pages Builder Css" and paste the same code to the respective window.





























































Save again and you are ready!




























































































6 Go to any page and enjoy your brand new menu! ( You need to preview as a user in order to see the changes made - just go to your home screen)



























































































That's it, you did it!































Note that in the "Custom CSS" section of your LearnWorlds site you may find all sorts of ready-made CSS snippets that you can use to customize the look and feel of your LearnWorlds site (e.g. changing the color of your site's navigation panel, hiding whole sections, make your topbar logo bigger, hide all course ads, etc.)































If you want to make your top bar logo bigger using custom CSS then you only have to follow this link:































http://support.learnworlds.com/solution/articles/12000024712-make-your-top-bar-logo-bigger-with-custom-css