BugWP logo BugWP
Back to Community
Home / Community / Theme → Storefront

How to Control Your Storefront Sidebar on Mobile Devices

28 threads Sep 16, 2025 Theme → Storefront

Content

A common challenge for Storefront theme users is managing the sidebar's behavior on mobile devices. By default, the theme shifts the sidebar to the bottom of the page on smaller screens to prioritize content. While this is a standard responsive design practice, it's not always ideal, especially if your sidebar contains crucial elements like product filters or navigation.

This guide will walk you through the most common solutions for controlling your Storefront sidebar on mobile, from simply hiding it to reordering its placement.

Why Does This Happen?

The Storefront theme uses CSS media queries to change the site's layout at specific screen widths (breakpoints). On desktop, the sidebar typically sits beside the main content. On mobile (usually below 768px), the theme stacks these elements vertically to ensure everything remains readable. The main content is placed first in the HTML structure for SEO and usability, which is why the sidebar appears at the bottom.

Common Solutions

1. Hide the Sidebar on Mobile

If the sidebar content isn't essential for mobile users, the simplest solution is to hide it entirely. This can be done by adding a small snippet of CSS code.

How to do it:

  1. Navigate to Appearance > Customize > Additional CSS in your WordPress dashboard.
  2. Paste the following code:
    @media only screen and (max-width: 768px) {
    #secondary.widget-area {
    display: none;
    }
    }
  3. Click Publish to save your changes.

This code tells mobile devices with a screen width of 768 pixels or less not to display the sidebar.

2. Reorder the Sidebar to Appear at the Top on Mobile

For situations where your mobile sidebar must be visible—such as when it contains important filters—you can use CSS Flexbox to change its order and move it above the main content.

How to do it:

  1. Go to Appearance > Customize > Additional CSS.
  2. Paste the following code. The max-width value targets mobile devices, and the order properties control the sequence of elements.
    @media (max-width: 768px) {
    .site-content .col-full {
    display: flex;
    flex-direction: column;
    }
    .site-content .col-full #primary {
    order: 2;
    }
    .site-content .col-full #secondary {
    order: 1;
    }
    }
  3. Click Publish.

Important Note: This method will apply the change to all pages. To target a specific page, like just the homepage, you may need to add a specific body class (e.g., .home) to the CSS selector for more precise control.

3. Adjust the Sidebar Width

In some cases, a sidebar might be too wide for certain laptop screens, causing it to drop to the bottom prematurely. You can adjust its minimum width to prevent this.

Example CSS:
@media (min-width: 768px) {
.right-sidebar .widget-area {
min-width: 300px;
}
}

Troubleshooting Tips

  • CSS Not Working? If your custom CSS stops working after an update, clear your site's cache and browser cache. The core class names for the sidebar (#secondary, .widget-area) are stable, but it's good practice to double-check with your browser's inspector tool if issues arise.
  • Unexpected Layout Changes: Rearranging elements with CSS can sometimes have unintended consequences on other parts of your layout. Always test changes on different devices and pages.
  • Plugin Conflicts: As seen in one thread, a conflicting plugin was causing layout issues on the cart page. If you encounter strange behavior, try disabling plugins one by one to identify a potential conflict.

By using these CSS techniques, you can gain greater control over how your Storefront theme adapts to mobile devices and ensure a better experience for your users.

Related Support Threads Support