How to Hide Blogger's Sidebar on Mobile

The Blogger sidebar is especially useful in providing space for widgets/gadgets such as Popular Posts, Featured Post, Labels and the Blog Archive. On desktop view it also provides a valuable space for vertical ads such as the skyscraper that are viewable even as users scroll down the page.

On mobile view the sidebar may be visible or not depending on the template in use. For the old non-responsive templates (Simple, Awesome Inc. etc), the sidebar is hidden if the mobile theme is enabled for mobile devices. Otherwise, it's visible as it’s on the desktop.

In custom responsive templates however, the sidebar typically aligns below the Blog Post when on Mobile/ Potrait view. This post is geared towards this type.



Hiding the Sidebar on Mobile using Conditional Tags

remove blogger sidebar
Remove Sidebar
To hide the sidebar content on mobile one has two choices:
  • to hide all the widgets inside the sidebar individually, or
  • to hid the entire sidebar

In both instances the hiding or removal as some may call it, is done using conditional tags however the latter is more efficient if the sidebar widgets need not be displayed on mobile. Let's see how we accomplish this.

  • NOTE: The new blogger templates (Contempo, Soho, Emporio) are responsive however their sidebars don't align at the bottom as it's the case with other responsive templates. Instead, the sidebar is revealed by using the hamburger menu on both desktop and mobile views. As such this post doesn't apply to them. Removing their sidebar as follows will only hide their widgets.
 
1. Go to your Blogger Theme and select Edit HTML. You may want to back up your template before proceeding.

2. Press Ctrl+F and then search for: aside. Depending on the template you may get many hits. Ignore the ones in the style code (CSS) and find the one inside the main body with closing and openings brackets. It could be in the following variations:
<aside>
<aside class='sidebar-container container sidebar-invisible' role='complementary'>
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
3. Now just below this line paste the following conditional tag:
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
So that you have something like:
<aside>
<b:if cond="data:blog.isMobileRequest == &quot;false&quot;">
4. Use the search function again and now find: </aside>. Just above it paste the following: </b:if>

So at the end of it all you'll have something like this:
<aside>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
... sidebar content code here ...
</b:if>
</aside>
5. Save your template and test your site in mobile view. To do that either load the blog on a mobile browser or just do it on desktop by adding [?m=1] to the end of your URL.

You can also use the Device Mode on Chrome or Firefox's Responsive Design Mode to emulate real world devices.

The sidebar should be hidden now. If it's not, check how many times <aside> appears in your code. If it's multiple times, you'll have to establish the correct one to use. You could inspect your blog's sidebar using the inspect tool to do this (on Firefox or Chrome right-click the Sidebar then select Inspect Element/Inspect).

To restore the sidebar remove the conditional tag we've added. While this just hides the sidebar on mobile, you can use the same principle to remove the sidebar on desktop alone by modifying the conditional tag accordingly.


Related Posts



Loading comments...