All sites on Weblium are automatically adapted to different screen sizes. The editor creates a mobile version automatically based off all the blocks and elements you've added to the site.

Since navigation menus in the header can take up too much space or be too small to read and click on, all their content gets hidden in the so-called burger menu on mobiles:



Tip: for more information regarding the logic of this adaptation, check the article Mobile view of the site.

In this article we'll show how to change the color of the burger menu icon and background.

Changing the color of the burger menu icon

The color of the burger menu icon on mobile devices depends on the dark or light shade in the website's color palette. If you have a dark background of the header of the site, the burger menu will have the color of a light shade from the palette, and if the background of the header is light, then the burger menu will have a dark shade color, respectively.

For example, here's a dark background of the header:



Therefore, the burger menu will have a light shade color from the palette:



To change this color, enter the editor, click on the three dots on the toolbar and open the Site style tab:



In the Colors tab hover over the current site palette and click Edit:



In the opened window, change the Light or the Dark shade to the preferred one, then click Done:



Publish your site for the changes to appear live.

Now, the burger menu icon will have the chosen color:



Changing the color of the burger menu background

If you use the global transparent header on the site, the burger menu will still have a color background when your site visitor expands it.

For example, here's how the header looks on the mobile version:



And here's how it looks when opening a burger menu:



To change this color, hover over the header and click on the "gear" to access its settings:



Turn off the option Make header transparent:



Then, access the settings of the row where the navigation menu is placed:



Open the Background tab and choose a color for the burger background:



Go back to the header settings and make it transparent again:



Publish your site for the changes to appear live.

Done! The background color in the burger menu will now match the row background:

Was this article helpful?
Cancel
Thank you!