All sites on Devellp are automatically adapted to different screen sizes. The editor creates a mobile version automatically based on 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 through the color palette

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 Settings:



To change this color, enter the editor, click 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 icon via custom code

If you want to set a custom color for your burger menu icon without editing the site palette, modify the CSS section in the site settings with the following code:


@media (max-width: 992px){ #header ~ header span[class="w-burger__line"] { background-color: rgb(255,255,255); } }*

In the


#header

part, instead of the word "header" (the first mention of this word in the code), there should be the header's anchor name, in which the desired burger menu is located:



Usually, if you have created only 1 header on your site, the code for it will be the same as above. If you added other headers, they will need to

#header-1 ~ header


,

#header-2 ~ header


and so on in the code.


The

rgb(255,255,255)

parameter specifies the color of the icon, and in this example it will be white. You can get the code for the color you want with this service.

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 after 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:



For our further assistance, you can always contact our support team via the live chat or by emailing to support@devellp.com.

Updated on: 04/14/2023