How to change the color of the hamburger menu?

How to change the color of the hamburger menu?

The hamburger menu is the menu that shows up on your site on mobile view. Due to the smaller size of the device such as a mobile or a tablet, the menu changes to a collapsed version mostly viewed on mobile as ≡


If you wish this color can be changed with a simple code addition. 

Here’s how you can change the color of the hamburger menu:


  • Access Dashboard> Website Builder> Custom Code 
  • Add the below-listed code in a new line in the CSS Section of the custom code page 
  • Click save
  • Open the site in incognito mode on your phone to view the change
.menubar.menubar-mobile .menubar-toggler span, .menubar.menubar-mobile .menubar-toggler span:before, .menubar.menubar-mobile .menubar-toggler span:after { background: rgb(245, 102, 238); }

Note: You will be required to change the color of the hamburger menu as per your needs. Hence, type in the RGB code of the color you want. Ensure to only change the numbers within the brackets. To get the exact RGB Code for the color you want, visit https://htmlcolorcodes.com, select the color you want, and copy the code numbers.


    • Related Articles

    • How to change the Blog Name on the Menu?

      This article shows how to change the name of the blog and on the menu as well. Here’s how it is done: Log into your Knorish site Go to dashboard> Settings> Blog Settings Update the blog name, Meta title, description, keywords etc. Click Save Then go ...

    • Customize User Theme: Change a student's view of your account

      This article shows you how to customize the theme for the user/buyer's experience. Your site theme dictates the look and style of your academy. Now you can also customize the theme for your user/buyer's experience. That includes theme customization ...

    • How to edit a site menu built on the old page builder (V2)

      This article shows you how to edit the menu on your website and learn how to create a better structure with tabs and sub-tabs. As shown in the example below, once the pages are created, the menu would populate all the pages separately. You would then ...

    • How to customize the "No Session Is Live" page or change the default offline or unpublished pages?

      When attendees click a session link before it’s live or after it ends, they see a default “No Session Is Live” page. Plus, there could also be instances when users find an unpublished or an offline page on your site. Now you can replace the default ...

    • How to add a submenu on my site's menu?

      This article shows you how to add a submenu on your site’s menu. Note: Ensure your page is published. To add a new page and how to manager pages on your Knorish site read our FAQ on Manage Knorish site pages. After the page has been added and ...