• Thu. Dec 9th, 2021

css – Making the menu toggled open on mobile devices Illustratr theme


Oct 18, 2021

I would like to make the menu appear the way it does on desktop devices for mobile and tablet devices.

It’s open on desktop, but a hamburger icon for smaller screens.

I looked at this question, but instead went with the following css:

genericon-menu::before { content: 
"MENU"; font-family: 
arial,helvetica,sans-serif; font- 
weight: bold; padding-right: 5px; 
position: relative; top: -2px; 
border-left: 1px solid #f1f2f3; 
padding-left: 10px; } main-navigation 

.menu-toggle { border: none; margin- 
left: -45px; }

.toggled .menu-toggle {width: 100px;}

which I took from here.

So, the hamburger icon is now “MENU” text, which is better, but I would ideally like to have the menu toggled open permanently for smaller screens.

I looked here, but couldn’t find what I was looking for.

My site is https://martinbeltonart.com

My fallback is to use the Rebalance theme, but I would rather stick with Illustratr if possible.


Leave a Reply

Your email address will not be published. Required fields are marked *