Blogger : How to fix missing Header Image in Mobile Template

Last updated: August 21, 2016
blogger-header-image-problem-thumb

The Blogger platform offers you different mobile templates for your site. You can choose between built-in templates (Simple, Picture Windows,…) or you can select a Custom mobile template, which will adapt your main template to the mobile version. This enables you to have a site with a consistent theme on both desktop and mobile devices. One part that might not be consistent though is with a header image. Depending on the options selected in the Layout section, the mobile template (either custom or built-in) might not show a header image. In this post, we will examine two ways to solve this problem.

Blogger - Header Image in Desktop Version

Header in desktop version

Blogger - No Header Image in Mobile Version

Header in mobile version

The problem of mobile template not showing a header image will only happen when you have a specific option selected in the "Configure Header" window in Layout section. One solution is to change to another option, the other solution (this only applies when using custom mobile template) is to modify template code. First, let's try to solve the problem by changing the option in the Layout section.

Note: To test a custom mobile template in a desktop, all you need to do is to append ?m=1 at the end of your URL.

Solution 1 – Remove description of the header in Layout Section

Go to Layout section. Under NavBar gadget, there should be Header gadget. For that gadget, click on Edit link.

A new window with the name “Configure Header” will open. This is where you set up your image header. At the bottom of the window you should have 3 options under Placement option:

  1. Behind title and description
  2. Instead of title and description
  3. Have a description placed after the image
If you have 1st option selected, your image will not show in the mobile version of your site. If you don’t need to show a title / description in the header, then the solution is simple. Just select either the second or third option. Both of these options shows a header image in the mobile version of your site.

But what if you still want to keep option 1 or you want to use different image for a mobile version? In this case, the modification of a template code is necessary and this is discussed next.

Solution 2 – Modify Blogger Template Code

To keep an option 1 “Behind title and description” and still have a header image in mobile version, we need to modify the template code. This solution only applies to custom mobile template!!!!

Note:If you have never edited a template before or you are not sure how to switch your mobile template to custom, check my other post How to modify Desktop / Mobile Template.
  1. In Dashboard, choose Template section and then click on "Edit HTML" button.Blogger - Edit HTML Button
  2. Under “Jump to widget" dropdown menu, select Header1.
    Blogger - Jump to widget Header1
  3. The first line should start with a <b:widget> tag of id="Header1", something like this:
    <b:widget id='Header1' locked='true'. Expand it by clicking on the arrow located right of the line number as shown below:
    Blogger - Edit HTML Expand Code Line
  4. Line <b:includable id='main'> should show up. Expand it the same way by clicking on the arrow besides the line number.
    Blogger - Expand Code Line for id main
  5. After expanding, a lot of template code inside it will get revealed (more than 50 lines). In the code that just expanded, find the first <b:else/> line. Below it, you should find the code same or similar to the one below. This code shows your image, title and description for a desktop version. We need to copy that and put it inside the mobile part of the code. Select and copy those lines from your template.

  6. Now move few lines up in the template until you find this line: <b:if cond='data:mobile'> and below it, there should be <div id='header-inner'>. Leave that line but remove everything inside it as marked below by yellow highlighted lines:

    Inside now empty <div id='header-inner'> paste the lines you copied from step 5. This will cause the header image, title and description to show in mobile version same way it does with desktop version.

  7. Click on “Save Template” button.

Using another image for mobile version of your template

Sometimes the header image for the desktop is not appropriate for mobile version of your site. In this case we can use the alternative image by referring to its custom URL. We do this by replacing first line in code from step 5 to be something like this:

Just replace the following placeholders in the above code:

  • YOUR_URL to the URL of your image.
    You will need to upload your mobile image somewhere on the web. You can use Google Photos for this.
  • IMAGE_ HEIGHT to the height of your image.
    For example, if height is 400px, then the code would be min-height:400px;_height:400px;

If the image is not shown properly, modify the CSS background properties to fix them. If you are not familiar with them, check this article for basic information and for more comprehensive tutorial, check here.

Summary

If you want to keep consistency of your website between desktop and mobile versions in Blogger, you need to use Custom mobile template. If the header is configured, so that the image is shown behind title and description, the image will not be shown in the mobile version. This can be solved in two ways. Change the way image is shown regarding title / description or by customizing your blogger template.

I hope you found this article helpful. If so, consider dropping a comment or share it on social networks.

Share this page

3 Comments

Add a Comment

Back to Top