Hide sidebar only on mobile in WordPress

Does your WordPress website look crowded on mobile phones?

Having a sidebar on your WordPress website can be useful for navigation, displaying widgets, or adding extra content. However, on mobile devices, sidebars can take up too much space and affect user experience. If you want to hide the sidebar only on mobile while keeping it visible on desktops and tablets, this guide will show you how to do it step by step.

For this you can use a custom code to hide it only in mobile and tablet devices while keeping it in Desktop.

Why Hide the Sidebar on Mobile?

• Better User Experience: A sidebar can clutter a small screen and make navigation difficult.
• Faster Page Load Time: Removing unnecessary elements can improve page speed.
• Improved Readability: Users can focus more on the main content.
• Better Mobile SEO: Google prioritizes mobile-friendly pages in search rankings.

Using PHP Snippets

First, You need to Login to Wordpress dashboard and Install a Code manager plugin that let’s you add PHP code snippets on your website.

Then create a New snippet and Paste the Below code.

function remove_sidebar_on_mobile() {
    if (wp_is_mobile()) {
        echo '<style>#secondary { display: none !important; }</style>';
    }
}
add_action('wp_head', 'remove_sidebar_on_mobile');

Make sure to change the Id of Sidebar (i.e. #secondary) in the Php code. The Id may be different in your case.

If you don’t want to use a code manager plugin then you can also directly paste the code in the function.php file. You can access that by Going to Appearance > Theme file editor.

Using CSS code

You can also Hide sidebar in Wordpress only in Smaller screens like mobile and tablet using a CSS code as shown below.

You can Use the Id or class of sidebar and make it hidden using the CSS media Query property. (As shown in the below code)

1. Go to WordPress Dashboard → Appearance → Customize.
2. Click on Additional CSS.
3. Add the following CSS code:

@media (max-width: 768px) {
    #secondary {
        display: none !important;
    }
}

Note: The #sidebar Id may vary depending on your theme. If the above code does not work, inspect the sidebar element using Chrome Developer Tools (right-click → Inspect Element) to find the correct Id.

Using Theme Settings (If Available)

Some WordPress themes come with built-in options to disable the sidebar on mobile. To check if your theme supports this:

1. Go to WordPress Dashboard → Appearance → Customize.
2. Look for Sidebar Settings or Layout Settings.
3. Check if there’s an option to disable the sidebar on mobile.
4. Save the settings and refresh your website on a mobile device to see the changes.

Video Tutorial

Hiding the sidebar on mobile in WordPress is easy and improves usability. Whether you use CSS, a theme option, a plugin, or edit theme files, the right method depends on your expertise level and theme compatibility.

If you want a quick fix, CSS is the best option, while plugins work well for non-coders. Try out these methods and enhance the mobile experience for your visitors!