Cacher is the code snippet organizer for pro developers

http://keypresswp.com/custom-menu-flyouts-in-studiopress-news-pro/

Fixing the sub-menu non-responsiveness...

Kevin writes in the StudioPress forums about how the News Pro theme handles sub-menu items:

One thing I have noticed is that that the menu I have in my header does not seem to be responsive to screen size. I have six categories in this menu, each has at least one subcategory – with some then having further subcategories.

When you hover over a category the subcategories drop down automatically, and look great! The problem is that by the time you get to the fifth and sixth parent categories, the subcategories open up beyond the screen width, so you cannot see them. The same thing happens on the mobile version as well.

Third-level sub category items are cropped in this view and it gets worse for menus with more items, longer menu labels, menu items starting further to the right and on smaller screen sizes.

It might be possible to correct this by changing the order of the menu items, but that could compromise your content and navigation. Instead, we’ll fix it with some simple CSS targeted at the problem items to make them open in a position to suit the screen size and prevent cropping.

First we need to be able to target the problem menu items. In the Menu editor, open up the “Screen Options” drawer at the top of the screen and  check “CSS Classes”, then close Screen Options.

Now we can add CSS classes to the menu items we want to adjust.

Here we add the class menu-right to the top-level “Multi-Level Menu” item and sub1 to the “Sub Category 1.1” menu item.

Then we add some code to the bottom of the style.css file to manipulate the newly labelled menu items. In this case, the  menu starts being cropped by the screen edge when the screen is resized and the main 1023px media query kicks in.

With these menu titles and positions, the sub-menus and sub-sub-menus are opened to the left (instead of right) and shifted 60 and 459 pixels respectively for alignment. These values would be different for menus with different length labels. The final menu opens back on top of the first level menu to keep things in order.

/* add to the bottom of the style.css file */
/* Correct News Pro Menu flyout */

@media only screen and (max-width: 1023px) {

    /* shift sub-menu left */
    .mobile-right .sub-menu .menu-item a {
        background: Lime;
        left: -60px;
    }

    /* shift next sub-menu more left  */
    .mobile-right .sub1 .menu-item a {
        background: Tomato;
        left: -459px;
    }
}