How to Keep Submenu Items Hierarchy under Mobile

submenu items hierarchy

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.

About the Author

Tihomir Ivanov is a WordPress web developer, founder of tishonator.com, a fan of Linux and Open Source, a gym enthusiast, a vegan, a fan of minimalism, good movies and books :)

Leave a Reply