issue with mobile menus

Hi there,

To move the sidebar up on mobile, try this CSS:

@media (max-width: 768px) {
    #right-sidebar {
         order: -1;
    }
}

Your top bar just doesn't have enough space for all the items on one row, here's the CSS to make the items wrap on smaller screen.

.top-bar .widget_nav_menu>div>ul {
    flex-wrap: wrap;
}

To move the grey menu to the end of the page, try this css:

@media (max-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
    }
    nav#site-navigation {
        order: 99;
    }
}

Hello

Thanks for the code. I eventually used the third one.

For the first one, it just put the menu on two lines which is not good looking .. Anyway to reduce the whole size of the menu or maybe to remove some elements on mobile view ?

LFHFY

Anyway to reduce the whole size of the menu or maybe to remove some elements on mobile view ?

Yes, that's the way to go.

I thought there would be away to display different menus according to desktop or mobile ?

I thought there would be away to display different menus according to desktop or mobile ?

We can selectively hide some of the menu items on mobile, if you can tell me which items you want to hide on mobile, I can help with CSS.

OK thanks take note of that ...

No problem :)