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

  • 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. 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! 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;

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.