Menu in wrong column on mobile

  • Hi! Hope you can help me…

    I’ve created a webshop using WooCommerce. In the accompanying sidebar are a few widgets, among which a Mega Menu and a search button.

    Everything looks stunning on a big screen, but on mobile, the entire sidebar moves to the bottom of the page. Visitors have told me and the actual shop owner they were searching for the menu and the search, so it has to move just underneath the header on a mobile screen.

    Apparently by default, the shop is “column 1” and the sidebar is “column 2” apparently.

    Of course I can use something like this:

    @media (max-width: 680px) {
    .site-content .col-full { display: flex; flex-direction: column-reverse;
    }
    }

    or similar custom CSS, but that moves all the content of the sidebar to the top and not just Search. Aiming at just that one widget does not seem to work!

    What can be the solution for this?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi bramvanmunster,

    What can be the solution for this?

    Good question ?? I think this is more of a general HTML/CSS problem that happens when the html layout is how you have it (content on left, sidebar on the right).

    The only way I can see it be done (without using JavaScript to reorder the elements based on screen width) would be to output the menu before the content, hide it on desktop, and reveal it only on mobile.

    Regards,
    Tom

    Thread Starter bramvanmunster

    (@bramvanmunster)

    Hi Tom,
    Thank you for replying!

    I’m not really sure where the problem is exactly, but on computer screens it has to remain ‘as is’, and on mobile, the menu and search have to move to the top, rest can go down.

    Bram

    Plugin Author megamenu

    (@megamenu)

    Hi Bram,

    The problem is the order of the HTML, it is:

    content
    sidebar

    On desktop these appear side by side, but on mobile they appear stacked on top of each other.

    My suggestion was to add another sidebar before the content, which is only displayed on mobile, like this:

    sidebar (displayed on mobile only)
    content
    sidebar (displayed on desktop only)

    That is something you might need to ask your theme authors for help with (or if you are not sure, employ a freelancer to help you with).

    Regards,
    Tom

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Menu in wrong column on mobile’ is closed to new replies.