How to Keep Submenu Items Hierarchy under Mobile

By default, when you open a menu under mobile screens, all of the menu items are aligned at left. In case you want to keep the submenu items hierarchy (like the screenshot above), it will require a small code change. Here are all of the necessary steps:

1. Admin Panel -> Left Menu -> Appearance -> Theme Editor
2. Open style.css
3. Under
   /* Medium Resolution */
   @media screen and (max-width: 799px) {
4. Find the following code (about 100 lines below):
   #navmain ul {
   padding:0;
   }
5. Then replace it with:
   #navmain ul {
   padding:0 0 0 25px;
   }
6. Save changes

That’s all. Now, when open your website under mobile screens, the submenu items hierarchy will be displayed.