Second level menu items float to the right off screen on mobile

Hello,
I have added blog Sub-categories, below Categories to the BLOG item on my main menu. On mobile, the first level entries (Categories) display ok when clicking the down/right icon, but clicking to display the second level opens the menu items off to the right (off-screen) on my iphone 6.
I notice there are some similar topics, but for differnt themes, so not sure if I can use them, could you please advise?
I attach an image:


Many thanks,

Hello,

You should be able to fix this with css code below:

@media screen and (max-width: 991px) {
    .btn-submenu {
        position: absolute;
    }

    .has-banner .main-navigation ul ul li {
        text-align: center;
        position: relative;
    }

    .main-navigation ul ul ul {
        left: 0;
        width: 100%;
    }

    .main-navigation ul ul li:hover>ul {
        left: 0;
    }
}

Add it from Appereance > Customize > Additional CSS field and result should look like this https://www.screencast.com/t/Vk9yO4wHaU

Best Regards!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.