Blogger : How to fix missing Header Image in Mobile Template

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.

The problem of the 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 a custom mobile template) is to modify the template code. First, let's try to solve the problem by changing the option in the Layout section.

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

But what if you still want to keep option 1 or you want to use a 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!!!!

1. In Dashboard, choose Template section and then click on "Edit HTML" button.
2. Under “Jump to widget" dropdown menu, select 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:
   
4. Line <b:includable id='main'> should show up. Expand it the same way by clicking on the arrow besides the line number.
   
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.

           <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height                      + &quot;_height: &quot; + data:height                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
             <div class='titlewrapper' style='background: transparent'>
               <h1 class='title' style='background: transparent; border-width: 0px'>
                 <b:include name='title'/>
               </h1>
             </div>
             <b:include name='description'/>
           </div>
   

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:

         <b:if cond='data:mobile'>
           <div id='header-inner'>
             <div class='titlewrapper' style='background: transparent'>
               <h1 class='title' style='background: transparent; border-width: 0px'>
                 <b:include name='title'/>
               </h1>
             </div>
             <b:include name='description'/>
           </div>
   

   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:

<div style='background-image: url(YOUR_URL);background-position:left ; min-height:IMAGE_HEIGHT;_height:IMAGE_HEIGHT ;background-repeat: no-repeat;&quot;' id='header-inner'>

Just replace the following placeholders in the above code:

• YOUR_URL to the URL of your image.
• 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 more comprehensive tutorial.

Summary

If you want to keep the consistency of your website between desktop and mobile versions in Blogger, you need to use a Custom mobile template. If the header is configured, so that the image is shown behind the title and description, the image will not be shown in the mobile version. This can be solved in two ways. Change the way the 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 sharing it on social networks.