How to Hide Sidebar For Mobile Devices in WordPress

If you are reading this, you probably realized that having a sidebar on mobile devices is not necessary. This Itechguide teaches you how to hide the sidebar for mobile in WordPress.

Overview

For most WordPress themes, when you add sidebar widgets – primarily intended for larger screens – these sidebar widgets also display on mobile devices.

In the first instance, on a mobile device, a sidebar is no longer a “sidebar” but more of a “bottom bar”. Furthermore, on mobile devices, sidebars display after the main post – defeating the purpose of having them.

Moreover, having unnecessary sidebars on mobile devices may contribute to slow load times on these devices.

However, if your theme does not offer this option, use the steps in this guide to hide the sidebar on mobile devices.

Step 1: Find The Sidebar DIV ID For Your Theme

Hiding sidebar on Mobile devices in WordPress essentially involves modifying the sidebar div with CSS. However, to modify the div with CSS, you need the div ID.

Follow the steps below to find the div ID for the sidebar of the theme you use for your WordPress website:

1. Open a post or page on Google Chrome or the new Microsoft Edge browser.
2. Then, right-click anywhere on the sidebar and select Inspect.

3. The Inspect element will open some codes on the right of the page. This has an upper part (labelled 1 in the screenshot below). It also has a lower part (labelled 2 in the screenshot).

On the lower part, the Styles tab will be selected by default. To locate your sidebar div ID, look for an element with the word “sidebar”. Some themes may simply use “sidebar”. Others may use “sidebar-main” or “main-sidebar”.

Step 2: Add this CSS Code to Your Site

The next step is to add this code to the “Additional CSS” section of your WordPress theme. This is the code that hides sidebars for mobile devices in WordPress.

@media (max-width: 768px)
 .sidebar {
     display: none;
 }

Follow the steps below to add the above CSS code to your theme:

1. Sign in to your WordPress site as an administrator.
2. Then, on the left pane, hover over Appearance and select Customise.

3. When the Customise option opens, scroll down and click Additional CSS.

4. Finally, copy, paste and amend this code into one of the sections – then, on the top click Publish.

@media (max-width: 768px)
 .sidebar {
     display: none;
 }

/* Remove sidebar from mobile devices -3rd April 2021*/

Step 3: Clear Cache and Test

To be clear, the last section effectively hid the sidebar for mobile devices in WordPress. However, I decided to add this section because if you use a caching plugin or CDN, you will need to clear the cache for the changes to take effect immediately.

After clearing the cache in the caching plugin and/or CDN, open the website on a mobile device. If the change does not reflect immediately, use Incognito (Chrome) or InPrivate (Microsoft Edge).

Conclusion

I hope you were able to hide sidebar for mobile devices in your WordPress site with the steps in this guide.

I also hope you found the guide helpful and easy to understand? If you found the guide helpful, click Yes to “Was this post Helpful?” below.

You could also offer your feedback with the “Leave a comment” form found at the end of this page.

Finally, for more WordPress guides, visit our WordPress & Websites How-Tos page.