Change default status and replace the icon for an hamburger menu

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

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;
}