Menu - Responsive design issue

Hello, I am having a problem with menu(see picture) which should be responsive and adapt
to smaller resolutions but i does not work with all resolutions as it sometimes "cuts" the menu in half.

Any suggestions?

  • Predrag Dubajic

    Hey Boris,

    Hope you're doing well today :slight_smile:

    I checked one of your sites but I'm not sure if that was the correct one so could you tell us which one is it? :slight_smile:

    If I did check the correct one the issue is that responsive menu (hamburger menu) shows only on screens under 800 pixels while on others it shows full menu and causes dropdown to go out of the screen.

    What you can try is apply below CSS code that will move dropdown more to the left on screen sizes between 800 and 1333 pixels since that's where the dropdown goes out of the screen:

    @media (min-width: 800px) and (max-width: 1333px) {
        .menutop .sub-menu {
            left: inherit;
            right: 0;
        }
    }

    If your theme doesn't have custom CSS field, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Best regards,
    Predrag