Styled photo courtesy of A Prettier Web
Is your blog header making you ill?
If so, I’ve got a remedy for you today: an inspirational showcase of blog headers.
Here’s a look at some gorgeous trends I’ve noticed in header design. Be inspired for your own blog’s design!
Other posts in the Blog Headers theme:
Is Your Blog Header Awkward? Fix it Now!
How to Write a Kickbutt Blog Tagline + a Worksheet
The Centered-Lone-Logo Blog Header
Back in the day almost all logos were left aligned within the blog header, but it’s now become quite popular to center it. In fact, this seems to be the most popular way to design a header these days.
This works well with wider logos, but narrower ones work just as well as you can see in the Sunny with a Chance of Sprinkles example below.
The lone logo looks great with a white or solid colored background or you can also try placing it on a subtle patterned or textured background as well. Which are your favorites?
Here’s why centered logos work so well.
When all you have in your header is a logo, it looks unbalanced to have it left aligned with nothing else to the right of it. Check out these beautiful examples…
From top: Design Lotus // Careful Cents // A Prettier Web // Green Compass // Intentional Hospitality // Sunny with a Chance of Sprinkles // Meet Me At Mike’s
The Logo-with-Menu Blog Header
If you really want to left align your logo, that’s totally ok. Just make sure you balance out the right side with something else. Good options are social media buttons, an opt-in form, or your menu bar, like in these examples below. You can either set the menu to the right of your logo or you can center the logo within the menu. If the logo is small enough, I love this look!
From top: Cocorrina // Anna Marie Moore // Bash by Brenly // Eat Yourself Skinny // Living in Yellow // Salted Ink // One Love Photo // Hello Love Photo // Not Without Salt // Love Inspired
The Big Photo Blog Header
There is a right way to do a big photo header and a wrong way. The wrong way is to use a big squarish photo and not crop it’s height (I think this is a thing in some free Blogger templates). The right way is to use a big photo and crop it vertically so that it creates a nice horizontal shaped header that’s not too tall.
With a big photo header, you can create a collage if you want or just use a cool photo that has something to do with your blog’s content. But please! If anything, use a high quality photo that has good lighting and coloring and actually looks good! Also, be sure that the colors in the photo match the colors in your blog’s design. I can’t stress enough how important this is and how often it’s overlooked.
Another way to create a big header is to use a big photo of you. This is great for personal branding. Take a look at some of these fabulous examples…
From top: Julie Harris Design // Electric Empire // Sally Hope // The Uncaged Life
The Graphic Blog Header
Another way to dress up your header is to use illustrations or graphic patterns to fill it up. There’s a gorgeous trend going on now with these graphic botanical headers and they just make me swoon!
From top: Made Vibrant // Frock Files // Pinegate Road // The Paper Mama
The “Framed” and “Unframed” Blog Headers
Any of the above headers fall into one of two categories: what I like to call framed or unframed. What I mean by that is either the header is bordered by the blog’s border or it has no borders, as if it’s stretching 100% across the screen or blends into the page’s background.
Here, let me show you…
The first three below are framed headers. You can probably get a better idea by clicking through to the blogs themselves and seeing the entire page. See how the header is framed within the borders of the site? If you go this route, please make sure that the header image actually stretches to the inner edges of the border. Remove padding or margins around the header image.
From top: Oh My Handmade! // Hands Free Mama // We Love Citrus
These last three are unframed meaning they blend into the background of the site horizontally. Go back and look at the other headers in this post and see if you can pick out which ones are frame or unframed and see how they work within the context of the design.
From top: The Fresh Exchange // Designs by Mandee // Kate Stevens Design
What NOT to do with your Header!
We’ll talk more about awkward blog headers next week as we continue the Blog Headers June Theme!
Did you like this post?
If you’d like to learn more about doing some DIY design work on your blog, you’ll want to check out my new guide, Blog Beautiful: 50 Tips + Fixes to Make Your Blog Glow!
Order it now for instant download and take that blog from ugly to lovely today!
That was the first of 4 installments on Blog Headers! Join the discussions going on in the Facebook group here!
Well that’s it! What trends have you noticed in blog headers lately? Any I’ve missed? What do you think of these? I’d love to know. Say so down below.
Would you share this post with your friends? A thousand kisses for you! Just click one of these cute buttons below 🙂
This is fantastic! What a lot of great examples for reference and inspiration! I’m due for a header update, and I think I’ll try incorporating a graphic a made (it’s a travel stamp style circle with my blog name and a pagoda in it, I love it, but a perfectly round shape is kind of awkward to work into the thin rectangular space for a blog header ) into a scrapbook style header. Whacha think?
Hi Claire, so glad this was inspirational for you! You are right, circular logos can be awkward sometimes to fit into a header, but it can be done well.
What you might try doing: add a horizontal bottom border to your header. This will help break up the space between the header and the content. Then what you can do is have the logo “break” through the border by crossing over it a bit. (like this: http://www.designcrushblog.com/)
You can either center the logo or left align it and add a nav bar to the right of it like in the examples above (logo with navigation headers) or your social media icons.
Haha. Wow. We must share a brain… I have a blog header inspiration post in the pipes as well. You’ve found some really good ones! 🙂
Ha, that IS funny Angie! Just like our sidebar author profiles. 🙂
Can’t wait to see yours!
Your blog is amazing!
Perfect timing! I’m just working on a new blog header now. These are gorgeous, great for some needed inspiration!
Yay for goood timing! Glad I could help, Amy!
Seriously..I’m so happy I found you on pinterest! Ive been stressing over my blog design, colors, how to brand myself. I HAVE to say I feel like you saved my life! Very happy I found you and I cant wait to see what you help me with.
thank you, thank you, thank you
xoxo
Aw Tiesha, that’s so sweet of you, thank you so much!! I can’t wait to see the changes you make!
Hey, Marianne!
These are definitely some great blog headers! I am planning on working on a new design for my blog, in spirit of the new year.
You know, one of my biggest pet peeves is not being able to center the logo right in the middle of the nav. I haven’t learned how to do this! And I have been searching for a tutorial for a year now! But no one has published anything about it 🙁 I really wanna know how you can center the logo in the middle of the nav. I would appreciate some help if you can give any!
Thanks a LOT, again!
Your reader,
Soma R.
Hi Soma, glad you liked the collection!
Gosh, that’s a great idea for a tutorial. I’ll see if I can whip one up in the next month if you can wait that long.
Can’t wait to see your redesign! I’m doing one for the new year too!
xD I would gladly wait another month for the tutorial!
It would be super GREAT!
Thanks a LOT!
Wonderful! I now have to redo my blog header. I’m excited!
I can’t wait to see it Kristine, do come and let me know when you’ve re-done yours!
Just used all of your tips and inspiration to re-brand and redesign. Thanks so much for all you do!
Kaitlin, nice job on the redesign and you’re very sweet for coming by to say thanks! I’m glad you showed me!
There are some lovely headers but how do you create them? IS there a tutorial? a great site? I would love to know I am just building my website and blog and would love to create something beautiful. I am just not super tech savy.
Thanks
Hi Katie, this month we are discussing blog headers here on the blog and in the Facebook group: http://designyourownblog.com/blog-design/blog-beautiful-facebook-community-guidelines/ I don’t have a tutorial yet on how to create them but i may start. the problem is that there are so many different styles of headers and many different kinds of templates and platforms that it’s a bit difficult to do a tutorial that helps everyone. but i’ll see what i can come up with.
Perfect! I’m crushing on all the headers you put together in a post. I can’t decide which is my fav now!
Awesome Sadaf, so glad you are finding inspiration!
This is great, lots of inspiration. Right now I have a very plain centered blog header (logo and blog name). I’d like to change to a logo with menu header I’m just not sure how to implement it properly.
I’m very excited for this months theme, I can’t wait to learn some new things.
So great Patricia! I can’t wait to see what you do come up with after this month! We’ll have to have a showcase in the FB group when all is said and done for people to show off 🙂
I love this post so much! I’m always looking at fun blog headers and being inspired by them. I love how this post is a roundup of so many good ones! 🙂
So great Gina! I’m really glad you liked the examples!
This is so awesome for inspiration! I love how you have things organized into different types of headers. And what great examples, I love them all. Now I’m feeling motivated to spend some time thinking about an update to my blog header. Thanks, Marianne!
Thanks Emily! My brain always likes to categorize things that way, glad it was helpful! 🙂 Would LOVE to see your new header ideas and feel free to share something you’re working on in the FB group. We have a very supportive and helpful community there.
I’m so excited to work on my header now! These are all so great!
Awesome Toyin, I love the progress you have been making on your blog!
So awesome to see some of our work in there! Xo!
Your blog has a beautiful header Cathy! Thanks for checking out the post 🙂
Thank you so much for featuring my blog’s header in your post here. I’m blown away by the other beautiful and creative designs. Very happy to be mentioned alongside them!
You’re so welcome Carrie! I had your blog bookmarked and liked the hand-drawn look of your header!
Wow, you’ve found a lot of awesome headers with great design Marianne! Thank you so much for featuring mine, I am seriously flattered!! ^_^
Sure thing Mandee, it’s a pretty header! Thanks for checking it out!
¡Hola!
Deberías hacer un tutorial de “¿cómo centrar el logo en el menú?”, sería genial.
Saludos.
Thanks for the suggestion Claudia, I’ll see if I can get one done sometime soon!