Articles on: Site editing
This article is also available in:

Changing the burger menu color

All sites on Weblium 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 Mobile view of the site article.

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:



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

Updated on: 12/05/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!