Display blog title image in Blogger's new floating header bars

Here's a simple way to display your Blogger blog's logo image in that floating header bar that appears as you scroll down in your blog (if you're using one of their new 2017 templates).

Blog title in floating header bar: text vs. image

Background


Right now, even if you add a header image to your blog (via the Layout page), the floating bar thing that appears when you scroll down will show just the name of your blog in text - not the logo image you love [Compare the blog title in the two images above]. Note this only applies to the four new themes: Contempo, Notable, Soho, and Emporio.

So this post will show one way to display an image in that floating header bar. It doesn't even have to be the same image. You could have one larger logo for the top of the blog page itself, but a different thinner logo to fit nicely in the floating bar.

This is adapted from an old trick for showing the image in Dynamic Views templates. Basically I will just set the background of the floating header element as an image. That way I can do it all via CSS rather than messing around with the blog template.

All the following code should be pasted into (Theme → Customize → Advanced → Add CSS)

Let's start.

Step 1 - Remove the blog title text 


We start by hiding the blog name text from the floating bar. Otherwise it will cover the image and look ugly. 

.centered-top-container.sticky .widget.Header h1 {display: none;}

Step 2 - Add the image


I'll assume you have your image already uploaded somewhere. The best way is just to insert the image into a Blogger post, and grab its URL by switching to the "HTML" compose view. You don't even need to post it; just uploading it once to a post draft is enough.

Your image should have a URL like:
 https://2.bp.blogspot.com/-blahblahblah/blahblah/blahblah/blahblah/s380/filename.png

Pay attention to that number. To get the best image size to use here (i.e. the smallest that's still clear enough to read), adjust that number manually first. For me in my example, s280 was the best size.

Hold on to that image URL.

Now paste the following into your blog's CSS:

.centered-top-container.sticky .blog-name, body.item-view .blog-name {
    background: url(https://2.bp.blogspot.com/-blahblahblah/blahblah/blahblah/blahblah/s380/filename.png) no-repeat center;
    height: 65px;
}

Replace the URL there with your own image URL.

Also check the height size. 65px looked best for me. Change the number to whatever size suits you and your chosen image. 

Step 3 - Remove the subscription button


So far it will look like this:

Subscribe button still there. Let's remove that.

We could either move the subscribe button, or just hide it completely. I think it's better to remove it. Add this code to hide it:

.centered-top-container.sticky .blog-name .subscribe-section-container {display: none;}

You could just move it down, in which case you would get this:

Subscribe button moved below the logo image

But I preferred just hiding it (as above), and relocating the blog subscription widget to the sidebar.

Step 4 - Padding (optional) 


This isn't necessary, but if the image spacing looks weird at all, you can also try just changing the padding (the white space around) with this:

body.collapsed-header .centered-top-container .blog-name {padding: 30px;}

Play around with the number until you find a good look. If you do this, you could also just remove the "height" portion of the Step 2 code.

Final look


Again here's what it would look like before and after:

Before: text title
After: Image title 

Those of course are mobile views. Here's how it looks on desktop:

Desktop view with image header


Alternative: keep blog title with a small logo image


Note that these instructions were for a full image header that includes the blog name in the design. If your image is just a small logo, you can still keep the blog title text next to your small logo. In that case, you'll want to:

  1. skip Step 1 from above
  2. change the word "center" in the code from Step 2 to either "left" or "right"
  3. align the blog title to the opposite side by adding this:

.sticky .widget.Header h1 {text-align: right;}

Comments

SIL said…
Bro, I've been searching for almost two weeks how to fix my Soho template problem and you're code is the only one the works! I have tried a lot of codes from blogspot users and they didn't work. I just like to ask how can I position to the left my small logo?
My is positioned in the center and the blog title is on the left side. I like to put it beside my blog title, either on the right or left, whichever looks good. Man big big big thanks! At last I saw the right code. I can sleep now.. LOL
Sam Nordberg said…
Haha, glad I could help!
You can move the logo to the left or right just by changing the word "center" in the code to "left" or "right".
Then, align your blog title to the opposite side by adding this code:

.sticky .widget.Header h1 {text-align: right;}
Nilaul said…
Excellent man, thanks! However the height command did not change the size of the logo for me. I had to use the "background-size" command.

I still want the logo to link to the homepage, which unfortunately it is not doing anymore. Is there a way to do this? Also is there away to move the new logo, a few pixels to the right?

I really do appreciate your help. Thanks in advance.
SIL said…
Hello Sam,
Been tweaking my site again..btw your code is working great and i thinkg it's the only code out there that works for the new blogger templates...
I just like to ask some help again..I like to combine my header image and header text but i can't find the right codes again..I read all the blogger answers in the forum but they are no good...the only code I found working is this
.Header h1 {
text-align: [Alignment];
}

I can move the title left and right, but I need to position my image after the header text title...is there a way I can do that using css codes only?...and I like to resize and move the image up down left right to get the right spot...man been reading all the w3school codes selectors, divs, parameters etc..only brought me headaches.. :) hope you can help me with the codes...big thanks bro
Sam Nordberg said…
What's your blog URL? I can't really help if I can't see what you're doing lol.
Sam Nordberg said…
I don't know of any reliable way to make the image a link when you insert the image via CSS. You'd have to not use CSS and instead insert the image in your blog template. You can try that but it's harder than just copy/pasting CSS code, though it will let you make the link.

To move the logo, just add something like {padding-left:5px;} Play around with the size until it's where you want it to be.
SIL said…
Hello Sam,
This is my blog URL https://www.cooldogtuts.com/ my blog is just two weeks old...I noticed sometimes the image also appeared on the actual header...
what i do is i just paste it again on the css panel, then its back to normal. this is my link on the Header widget
https://2.bp.blogspot.com/-lBrMEA8wl9g/WnpoeZiNoyI/AAAAAAAABd8/vhJMQsPw6ksHhqvHB3zJX7yMqS4QVuqCgCLcBGAs/s1600/1.png

I also noticed when I included my h1, I can't find the url of my logo...is there a way to add the image and text, adjust them side by side..and they will also appear on the sticky widget header?
I tried to follow the tutorials here http://tricks-for-new-bloggers.blogspot.com/search/label/Header but I think its not updated or maybe I just don't know how to understand it :) LOL
Sam Nordberg said…
I'd suggest aligning your logo to the right, instead of center. And also letting it auto-resize the height, like this:

.centered-top-container.sticky .blog-name, body.item-view .blog-name {
background: url(https://2.bp.blogspot.com/-lBrMEA8wl9g/WnpoeZiNoyI/AAAAAAAABd8/vhJMQsPw6ksHhqvHB3zJX7yMqS4QVuqCgCLcBGAs/s1600/1.png) no-repeat right;
height: auto;
}

Or just align it to the left. That way you won't have to worry about a big space gap between the text and image on a big-size screen.

You should remember that when you insert an image in this way, we're "cheating." The image *IS* the background of the text box. So it will be nearly impossible to make them line up side-by-side well since they're NOT 2 objects next to each other; they are 1 object.
SIL said…
How you doin bro? I just like to ask a little coding help, I know this is easy for you. I only need some instructions :) I like to use a zooming code from this site ( https://goo.gl/fSVNRD ) but I'm really confused how to run it. I'm using the very simple one from this site ( https://goo.gl/qTSyPm ) but from the other its a bit tricky. I'm confused how to run the codes the .js, CSS, HTML :( Also do I need to run slider code or it is included in the first website? I viewed the page source and there are 3 css.jquery stylesheet. Please give me instructions how I can apply these codes.
Lots of thanks to you bro.
Sam Nordberg said…
Hi. The short answer is: the "simple site" you mentioned is probably going to work best.

The long answer is: you're going to need to do some replacements of the code on the other side.

===

If you *really* want to use the code from the "JQuery Image Zoom Effect For Blogger" site, you're probably going to have to have the script inline inside your template, unless you can host it somewhere else. The problem with that site's code is that it's outdated; the JavaScript it calls isn't there anymore. You can still find a backup of it here:
https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/iblognet-codes/easyzoom.js

So basically you need to download that, use it to replace this outdated piece of code from the site here (I can't use tags in comments, so imagine they are here):
script src='http://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/

But it's tricky sometimes to put code inline in your blogger template. You'll need to make some changes. See this site for reference on how to do that:
https://almost-a-technocrat.blogspot.com/2017/03/how-to-avoid-parsing-error-in-blogger.html

Good luck!
Random J said…
Thanks for this! This wasn't what I was trying to do. But it provided a solution to an issue I had with my layout.
Alfian Zidny said…
Broo. How to make page list sticky top
Sam Nordberg said…
What's your blog URL?
Hello! I am wondering if you could help me with my blog image (pano of farm at top). It is not part of my header, it is just an image underneath the header. I would like for it to fully stretch across the screen, but I cannot seem to alter the CSS on my own (my knowledge is limited)! Thank you! 🙂 Website: https://www.cloverledgefarm.com/
Sam Nordberg said…
Try adding this in the "Add CSS" section of the Blogger theme editor:

div#Image9 {width: max-content;}
Anonymous said…
Hi There,

�� I am glad it worked. . .but am having issues with the desktop view, it isn't showing at all, please how can i fix this? ��
Sam Nordberg said…
What's the issue and what's your blog?
Anonymous said…
Its An Emporio Custom Theme, the problem is that the image on the header always disappear when viewed on desktops version, and does not show when searching for a post and clicking the siderbar icon.

This is the sample URL - https://hubbers9.blogspot.com
Sam Nordberg said…
Seems like the width is somehow being set to zero. Try adding this to the Add CSS section:

.sticky .centered-top .blog-name {max-width: unset; min-width: unset; width: 200px;}
Anonymous said…
It Was Helpful, Thanks Alot��. . .Am Also Grateful Because it works��
Sam Nordberg said…
Add this to the "Add CSS" section:

.centered-top-container.sticky {display: none;}
BLOGS By SYED said…
How to show only the title of post at homepage in blogger notable theme?
Tzivia said…
This helped somewhat but I'm still having trouble. The blog title is showing up on top of the image even though I've specified in the header widget not to display the title.
Top page looks okay, but inside pages look like garbage. I'd appreciate anything you could suggest!!
Thanks!

URL http://www.mamaland.org/2020/04/literally-two-minute-no-sew-easy.html

I pasted in your CSS as follows:
.centered-top-container.sticky .blog-name, body.item-view .blog-name {
background: url(http://3.bp.blogspot.com/-1P6t9hXtYaA/X77OGdUFUqI/AAAAAAAAtKE/T8FF68Iyu6InyJN5Ju66otJR4TL8qLORwCK4BGAYYCw/s380/mamaland%2Bblog%2Bbanner%2BBIGGER.jpg) no-repeat center;
height: 65px;
}
Sam Nordberg said…
Looks like the set of square images you've put in a widget there is blocking your image title. Did you mean to do that?

Anyway, it looks like your blog text title is in a different CSS class. So try adding this code to your CSS:
.replaced {display: none;}
Sam Nordberg said…
Probably the easiest way would just be to hide the post snippets by adding this line to your blog's CSS:
.post-snippet .snippet-item {display: none;}

The other way would be to remove the post snippet from the theme HTML which would be more difficult.