When the screen becomes too small (i.e. if I restrict the browser window, or if I open my website from mobile) the menu becomes an hamburger (☰). I want to know how to do the following two things:

1. Change the default status of the menu from the "not toggled" status (when you can only see ☰) to the "toggled" status (when you can see the whole opened menu, and tapping on ☰ closes it).

2. Change the symbol from ☰ to another, perhaps something like "☰ MENU" or perhaps an entirely different thing.

How can I do these things? If it helps, I am using the Illustratr theme and my website (under construction) is

When the screen becomes too small (i.e. if I restrict the browser window, or if I open my website from mobile) the menu becomes an hamburger (☰). I want to know how to do the following two things:

1. Change the default status of the menu from the "not toggled" status (when you can only see ☰) to the "toggled" status (when you can see the whole opened menu, and tapping on ☰ closes it).

2. Change the symbol from ☰ to another, perhaps something like "☰ MENU" or perhaps an entirely different thing.

How can I do these things? If it helps, I am using the Illustratr theme and my website (under construction) is https://cesaregardito.eu

• customization
• menus

• 1 This question is not about wordpress itself, but about the Illustratr theme. Its author should be able to help you – cjbj Commented Dec 17, 2020 at 15:56
• @cjbj I don't know, the hamburger menu feature is present in almost every theme I have seen so far. I am not sure it's a theme-specific thing. – AnalysisStudent0414 Commented Dec 17, 2020 at 17:39
• @AnalysisStudent0414 The problem is that most likely every theme handles this logic differently. Some might do it CSS only, some with heavy jQuery, some with vanilla JS. Some have filters, other don't. That is why this question is theme-specific (in my eyes). – kero Commented Dec 18, 2020 at 10:16
• @kero oh okay, I see! – AnalysisStudent0414 Commented Dec 18, 2020 at 10:50

1 Answer 1

You can remove the current icon by css and then you can add your new icon in the .menu-toggle button with background-image.

the css is below;

.genericon-menu:before{
content: " ";
}
.main-navigation .menu-toggle{
background-image: url(/*image url*/);
background-size: contain;
}