Move widgets on top of the page for 📲 mobile
Image by William Iven from Pixabay

Move widgets on top of the page for 📲 mobile

Summary:

Move widgets/sidebar on top of the page for mobile devices in WordPress using CSS

Recently we had a client that wanted to have a search bar and sub-categories displayed on WooCommerce categories, but only when viewed on mobile.

We achieved this by adding a sidebar to the category pages and adding both search & categories widgets. Then we simply hide that sidebar on desktop devices with css.

Note: also set it full width

But, the problem was that by default on mobile devices WordPress puts sidebar bellow the actual page content. And there is a reason for that, simply the content is more important than the sidebar. But in our case, it is useless this way so we had to put the sidebar on top.

We did this also with css, simply replacing the sidebar and main-content position.


Note: You can’t just copy-paste this script, because it will not work on your theme. You have to identify your theme elements and replace ours.

.mkdf-wrapper .mkdf-sidebar-standard .mkdf-sidebar – your sidebar

.mkdf-wrapper .mkdf-container-inner .mkdf-grid-row – inner row section

Join the discussion