How to Move the Search Bar and Category Sidebar to the Top in Mobile View

General HivePress
1

How can I move the search bar and the category sidebar to the top of the blog page in mobile view?

2

Hi,

This can be done with some CSS tweaks. We can provide general guidance on how to achieve that, but this falls under dev guidance, which is available with premium support. If the support period for your purchase has expired, please consider renewing it for further assistance: Renew Support | HivePress.

4

I have now purchased premium support. Could you please help me with this?

7

Thank you for renewing your support, it helps fuel HivePress development.

Could you please clarify if you are using the search widget and categories in the blog sidebar, or something else?

If possible, please provide the URL of the page. Once we have that, we can provide a CSS snippet to make the sidebar appear first on mobile.

8

20251202_225120
20251202_2251201080×1096 57.2 KB

This should come first in blog page. (Search bar and categories)

10

Please clarify if it’s the blog page, the same as on the demo? Blog – ListingHive You can also send a link to this page on your site, this would make checking CSS classes of the page and composing a code snippet easier.

Thanks

11

Sorry, I am using a localhost for development, so I’m not able to share the link, but it is the same as the demo.

16

Please try this PHP snippet:

add_filter('body_class', 'add_blog_page_class');
function add_blog_page_class($classes) {
    if (is_home() || is_post_type_archive('post') || (get_option('page_for_posts') && is_page(get_option('page_for_posts')))) {
        $classes[] = 'blog-page';
    }
    return $classes;
}

And then this CSS:

@media (max-width: 767px) {
    .blog-page .site-content,
    .blog-page .main-content-wrapper,
    .blog-page .content-sidebar-wrap {
        display: flex;
        flex-direction: column-reverse;
    }
    
    .blog-page .site-sidebar {
        order: -1;
    }
}

Hope this helps