By signing up, you consent to receive email newsletters from me periodically.

A Showcase of Beautiful Blog Headers

A showcase of beautiful blog headers on DesignYourOwnBlog.com
A Showcase of Beautiful Blog Headers. Part of the June monthly theme on Blog Headers only on DesignYourOwnBlog.com

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!

It’s June and all month long we’ll be talking about blog headers. There’s one new post per week, plus discussions in the Facebook group so be sure to join us there!

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…

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!

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…

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!

Beautiful blog headers with big graphics or botanical flowers. See more at DesignYourOwnBlog.com

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.

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.

Beautiful blog headers that are not framed within the rest of the blog's borders. See more beautiful blog headers at DesignYourOwnBlog.com

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?

Blog-Beautiful-50-tips-make-blog-glow-smIf 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 🙂

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

37 Comments

  • Claire says:

    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?

    • Marianne says:

      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.

  • Angie says:

    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! 🙂

  • Amy says:

    Perfect timing! I’m just working on a new blog header now. These are gorgeous, great for some needed inspiration!

  • 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

  • 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.

    • Marianne says:

      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!

  • Wonderful! I now have to redo my blog header. I’m excited!

  • Kaitlin says:

    Just used all of your tips and inspiration to re-brand and redesign. Thanks so much for all you do!

  • katie lavelle says:

    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

  • Sadaf F K. says:

    Perfect! I’m crushing on all the headers you put together in a post. I can’t decide which is my fav now!

  • Patricia says:

    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.

    • Marianne says:

      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 🙂

  • Gina says:

    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! 🙂

  • Emily says:

    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!

    • Marianne says:

      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.

  • Toyin says:

    I’m so excited to work on my header now! These are all so great!

  • Cathy says:

    So awesome to see some of our work in there! Xo!

  • 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!

  • Wow, you’ve found a lot of awesome headers with great design Marianne! Thank you so much for featuring mine, I am seriously flattered!! ^_^

  • ¡Hola!
    Deberías hacer un tutorial de “¿cómo centrar el logo en el menú?”, sería genial.
    Saludos.

Leave a Reply

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.