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:
- 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).
- 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
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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;
}
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0