hello there! First time visiting? Subscribe to get new posts via email.

2 Different Ways to Make a Custom Header and Navbar for Your Blog

I feel like I’ve been doing a little bit of hopping all over the place with these picmonkey/blog design tutorials. Going from blog post dividers to social media icons to image URLs— I’ve been all over the place. There’s been no method to the madness!
So from here on out, I’m going to try and make my posting a little more methodical, a little more A-Z. 
With blog design, I think it’s best to start at the top. So let’s rewind past some of the other stuff we’ve covered and talk about the top of your blog– the most important part of your blog design: 
the header and navbar.
While good content and photos will ultimately keep people coming back to your blog, it’s oftentimes your header that grabs people in (or turns them away) in that split second that they click over from a link party, pinterest, etc… Which means: the top of your blog needs to look GOOD.
I’m going to cover two different methods for creating a custom Header and Navbar for your blog:
A) Header and Navbar are Separate Images
  • Easier to change out frequently
  • Less HTML coding
  • Less blog width adjustment

 1. Create the image for your header using picmonkey. Use this tutorial for more details on creating an image “from scratch” in picmonkey. 

  • size your image to be about 1100×300 pixels

(don’t forget that you can use YOUR OWN overlays to insert your photos into the header image)

2. Save the image to your desktop as a .PNG file
3. Upload the image to your header gadget on your design (old blogger) or layout (new blogger) page.

4. Make sure to click on “Instead of Title and Description” and “Shrink to Fit.”

Done with the header! Now, if you want a custom Navbar…

5. Go back to step one and now create the image you want to use for your navbar. The width of your image needs to be about 20 pixels less than the width of your blog, and the height should generally be no larger than 50 pixels. It might look something like this…

6. Add the links to your navbar in Image-Maps. See the tutorial for using Image-Maps here. (you will need the URL to your image for this step. If you don’t know how to get an image URL, see this tutorial).

7. Copy the code from Image-Maps and paste it into an HTML/Javascript gadget box on your design/layout page. Add a 

tag to the beginning of the code and a
tag to the end of the code. Save.

8. Drag the box to just beneath your header. Save the arrangement.

All done!

B) Header, Navbar, and (optional) Social Media Icons are One Image


  • You can achieve a more professional look
  • Gives you greater flexibility in the layout of your blog
  • Allows you to put the most important links up top where they are most visible

 This is how I like to do headers and navbars– so you can look to mine for an example of how it looks completed.

1. Just like the first method, you start with creating an image “from scratch” in Picmonkey. However, the image size will be a little different, and you can include images for social media icons and the navbar in addition to the title of your blog.

  • size the image to be 50-100 pixels less than the width of your blog by 300 pixels. For example, my blog width is 1200px, so the size of my image might be 1100x300 px.

2. Save the image to your desktop as a .PNG file.

While you’re in Picmonkey, create a blank white image sized to 20 pixels by 20 pixels. Save it to your desktop and name it: header eraser. We’ll use this in a few steps.

3. Upload the image into Image-Maps as an image URL, map the image with the appropriate links, and grab the code.

4. Keep that code somewhere you can grab it in a few minutes. For now, head to your design/layout page on blogger.

For this method of installing a header, we need to get rid of the header gadget on the design/layout page. There is a way to actually remove the header in your HTML code, but there’s a simpler (non-HTML coding) way to make it just LOOK like you’ve removed the header gadget...

5. Upload that tiny 20x20px white image from a few steps back into the Header Gadget. Make sure to check the “Instead of Title and Description” box. Now we’ve “deleted” the header gadget without really having to delete it!

6. Add an HTML/Javascript gadget to the design/layout page. Copy the Image-Maps code into it, and remember to add

tag to the beginning of the code and a
tag to the end of the code.

7. Drag the gadget to the top of the page (doesn’t really matter if it’s above or below the real header– it’s such a tiny gap), and save arrangement.

Voila! Totally custom and cute Header and Navbar!!

Please visit my Party Page for a more complete index of Link Parties.

Ashton Swank

Ashton is the owner and author of Something Swanky. Although first and foremost a wife and mother, she considers herself an online entrepreneur, freelance writer and photographer, and brand ambassador. Her focus is in food styling, food photography and recipe development.

106 comments on “2 Different Ways to Make a Custom Header and Navbar for Your Blog”

  1. Great tutorial! I’m going to try making my own nav bar right now. Thanks! :)

  2. Thanks for another great one Ashton! Now, if only PicMonkey would bring back my beloved Pupcat font, I’d be golden… :)

  3. i’m totally gonna check out the custom nav bar piece! thanks for the tips! xo


  4. LOVE the tips, Ashton. Thank you so much. I just started using PicMonkey and couldn’t be more obsessed! :)

  5. You make it seem so easy in your tutorial. If only I had the guts to do it myself :)

  6. this is amazing! can’t wait to try it out!!


  7. Thank you so much, I will be giving this a try!

  8. So now not only do I go to you for delicious treats…I now will come for blog design! You rock! :) I hope we meet in person one day!!

  9. Thank you for this! I made a header in no time. I had never used PicMonkey before, this was so helpful. :)

  10. Thanks for another great tutorial!

  11. I am in love with PicMonkey! Thanks for the great tutorial!

  12. This is the tutorial of my addicted to changing my blog design dreams. For ages I’ve been using separate photos for each of my nav bar components and pasting them together into an html widget. Why did someone ever make a tutorial teaching me to do it this (super long) way when it’s as easy as you show us here?!?! Thanks so much for your help. Can’t wait to redesign yet again!!!!

  13. LOVE< LOVE< LOVE>!!!! Just did this. Can’t tell you how smitten I am with this tutorial.

  14. I just pinned this so I can come back later and “play” with this – thx!

  15. Featuring YOU tonight! Thank you for linking up to {wow me} wednesday! Hope to see you again tonight! :)

    Ginger @ gingersnapcrafts.com

  16. Thank you!!! This is amazing (and I <3 Picmonkey!)
    New follower frmo GSC! Hope you follow me back!


  17. Oh! And I’m putting together a post of all the tutorials I’ve used to make my blog pretty – hope you don’t mind if I share this!!! :)

  18. wow you just saved me a ton of research and/or money! thank you so much, you are amazeballs.

  19. So cool! Does this work on wordpress too???

  20. I just used your tutorial to update my navbar. Thanks so much for the help- and Image Maps was a great resource! I always wondered how to do that….

    Valerie- http://www.occasionallycrafty.blogspot.com

  21. Okay, I have a question – made my header with no problem, now trying to do the navbar. . . .what images do I save in picasa or photo bucket?? I am so confused!! can you help please;)

    • The image is just the words you want your nav bar to say– for example, if you look at the top of my blog, my nva bar “image” would just be a skinny, long white strip with the words “home about recipes etc…”. I would upload that image to my practice blog (or photobucket or what ever) and use that URL to link up my pages to the right words (my about page to the word “about,” etc).

      Does that help any??

      Thanks for stopping by!

    • I am just now getting back to this reply you sent:) So do I do each “page” topic on my nab bar separately? I right now have them in one long bar like you did and the URL is for the whole bar not each individual word. . . .

  22. Great tutorial! thank you!

  23. So excited to try this! I’ve been looking at getting someone to design my blog, but maybe I’ll try this first! Thanks for sharing!

  24. Yay! Thank you for helping me with my new header!!

  25. I just found you over at Somewhat Simple – I love your tutorials! Thank you so much! :) I have a question that maybe you could help me with… my header isn’t centering. I used the center tags, but no luck. Any idea? My site is http://www.becomingmartha.com if you want to see what I mean. I followed your tutorial above with the header/nav bar in one, and used a small white space for the “real” header and a html gadget for the image I made. Thanks again! :)

  26. Hey! Lydia over at StyleIsStyle sent me to learn some things about blog design. What a help! Thanks for introducing me to picmonkey and image mapping…all these fun new things to do! I look forward to following your blog and maybe even trying some of these delicious recipes!


  27. i just used this tutorial & a few other of yours to update my page. Definitely going to write a post linking to this page & the other tutorials I used to show any readers I have how I updated it & where to come to. I love how it turned out, it’s terrific. If you have time I’d love for you to check it out, I still have a few more small things to update on it but I’m so pleased.

  28. Sorry this may be a silly question, but in the photos with the donuts, how did you get them all to be the same size? That’s the issue I am having… I am trying to upload my own photos in overlay to make a header with a collage of like 3 or 4 photos, but all of those photos are different sizes and therefore don’t look right when put in the collage, whereas yours as perfectly equal. Do I have to go and resize each of those photos to be the same size? Is there a good size to make them so that they don’t look distorted? Sorry if I’m way off lol! Thanks so much for this!

  29. THANK YOU! I love this! Check it out: lifewiththeellwoods.blogspot.com

  30. Thank you so much for this! If you want to check out my handiwork go to guiltlessmama.blogspot.com

  31. Thank you so much!! You help me a lot!
    Keep it up with the tips!
    Lovin’ ur blog! ;D

  32. You have no idea how much this has saved me from pulling my hair out! I have spent my entire Sunday trying different tutorials. This worked!!! Yay! Thank you so much! A few tips if you are using a theme in WordPress and have zero idea what you are doing AND unlike Blogger, there is no place to put the code once you get it——>>>>
    First, install a plug-in for enhanced headers and footers. (i googled for this) Then you find that plug-in under your Settings tab in the dashboard. You can paste the code there, and check the boxes for it to globally apply. Then go take out the image header you made before you had your image mapped one. (no need for the white box just don’t have another image).
    Then, you will freak out because 1) IT WORKS (good freak out) and 2) it doesn’t show up on other pages (bad freak out). So I went to each page and just clicked update for each of my four pages. Wa-la! It worked!!!

  33. Hi! Great tutorial – I really enjoyed making my code. The only problem I had was that one images links kept overriding the others.

    So, if I put my header and media icons code in place on its own it works fine. If I then add in my custom tabs bar underneath the header image the links from my header image override the tabs links. So instead of having links in to my various pages it has links to my email, pinterest etc from the header.

    I wonder if there needs to be some kind of barrier code in place between the two? I had to remove my nav bar and go back to the original blogger one :(


  34. This was such a wonderful tutorial, and you introduced me to a great photo editing site as well. Thank you, thank you, thank you!!

  35. OMG. I love you! You have all the how to’s I’ve been searching for!! Thank you!

  36. I can’t get my header to disappear completely. It shows the white square and says ‘header’ (I’ve reverted to my old header until I can fix this problem…)

    But the tutorial did work for me up til that point! Thanks.

  37. Ashton, I can’t even tell you how much this post helped me! You are awesome. Shared it on Wine & Glue’s FB page!

  38. Thanks for recommending PicMonkey! Glad I found your page.

  39. Thank you, Ashton! Trish from Mom on Timeout told me to check out your link when I asked her how to get my social media buttons on my header. This is SO much easier than those other tutorials I was looking at! <3

  40. Ha ha! I was up until 1 last night playing around with my blog. I really didn’t know what to do, so I just stripped it bare bones and would love to build it back up using these tutorials! I’m so glad I found them…

  41. Thanks for the tutorial! Just did this and it took no time at all – I had no idea it was so easy :)
    I will definitely be checking out the rest of your tutorials and recipes!

  42. I am soooo glad I found this tutorial. Just having a bit of trouble with the resizing. I am not able to resize to the dimensions you suggested. 1100 x 300. Any suggestions? Thanks for a great tutorial.

  43. All worked… Yay!!! My only problem is when I whiteout the old header (that works fine)… Then I went to add an HTML gadget and tried to drag it up in to the header area and it wouldn’t drag?? Cannot figure out why?

    I also get a weird space to the right of my new Nav Bar and can’t figure that one out either!

    Thanks again for these tutes!

  44. THANK YOU so much for this tutorial! I, like the others, have looked high and low for something that would break down creating headers and nav bars! This was so simple to follow and I was able to create a whole new look in no time at all! Thanks again!

  45. Great Article. But still i have a question in my mind. May i create a navigation bar with html so that so that i could change it at any time easily. And design it with ease.??

  46. Pingback: Blog Tip Thursday: Thoughts from a Newbie Blogger: 2013 Goal Setting | Healthy Living Blogs

  47. Pingback: reading list, volume 4.

  48. love the tutorial! I just need help centering it. Is there a code I missed somewhere? Thanks

  49. This is for Blogger but will it work for WordPress?

  50. I wanted to thank you, I just redid my header. My website looks so much better! I still have a little tweaking to do to center it, but I am in love with my new header. I love your website, thanks again.

  51. I just used your tutorials and now my page looks awesome!
    Thank you so much!

  52. Thank you for all of these tutorials. I was clueless using picmonkey and now the possibilities seem endless!

  53. I am so glad I stumbled upon your site!! Thank you for all the tips and tutorials! Your blog is definitely going on my blog roll when I get it together :)

  54. I have a question I cannot for the LIFE of me figure out. I cannot pin your recipes and I think it has to do with your drop down Nav bar. There is one other site I know that has this and I cannot pin their recipes either. IT KILLS ME because I love your posts!!! Do you (or does anyone) know if it is something my Malware or Firewalls are blocking?

    • Hmm… I don’t know the answer to this! Can you pin using the pin it button at the bottom of the post (instead of the button in your toolbar)?

  55. WOW this is perfect! thank you so much!!!!

  56. FYI–it wouldn’t just let me drag the HTML/Java code to the top. I had to find this website, to teach me how to allow it to go up there: http://www.spiceupyourblog.com/2009/11/how-to-add-gadgets-above-or-below.html

    Otherwise, this tutorial was PERFECT!

  57. Made the header, added the social media icons, got the code, realize I don’t know how to get it into wordpress! Yikes!

  58. Pingback: Monday Morning Blog Talk

  59. Yay! It worked! I love Picmonkey, but until today, I was not familiar with Image Maps. So easy and seamless. Thank you!

  60. Hi Ashton, I am having a bit of trouble. I uploaded the 20×20 white image to my header, then added the image map html code to the html widget right above my header. But the header and links from image map aren’t showing up. Do you have any ideas what I’ve done wrong?

  61. Pingback: How to Blog Round up - DIY Crafty Projects

  62. Pingback: Let’s Get Personal…with our blog design | Señora Luz

  63. What do you tag to the beginning and end of the code for the navigation bar? I don’t see anything and I’m pretty sure this is why my navigation bar is not centering.

  64. I loved this tutorial! I had a question though…When I went to paste my image map code into blogger…I get this weird grey box thing happening behind my new navbar! I’m wondering if it’s because I didn’t add a tag at the beginning and end of the code (I don’t really know which tag you mean…it doesn’t say on your tutorial). Could you help me out?!

    this is my site


  65. First I want to thank you for your blog, this is the first blog that I’ve come across that has actually been helpful with being able to design my own blog, I love it!! I’m wondering if you’ve done a post on how to make blog buttons, I’ve checked a couple and the coding always ends up weird.

  66. THIS IS AMAZING! Thank you so much! I just did this, and it worked perfectly. So much fun!

  67. This post is so helpful! I was able to change out my header with ease. Question, though….

    I added my header and navbar as one image (I think it looks better). So, my “real header” is the white box, which is fine. Except on mobile. My mobile settings are optimized for easier load times, but my site just has that blank box and no navigation menus. Is there a way to customize just mobile to show the blog header and drop down menu? Anywhere you can direct me? Thanks!

  68. This tutorial was invaluable to some like me that is just starting their blog. Thank you so very much. I have given you full credit on my blog, Thanks again.


  69. Help!! I SO love that I came across this through a web of various pages and sites and users, nonetheless. This is exactly what I have been needing (I’ve been wanting to open up my blog, but wanted to jazz it up a bit before trying to attract anyone to it) but too lazy and busy to take the time to search for. But since I’ve come across it now, I’m gittin-er-done! Back to my “help!!” plea… the extra tags you mention in step 6 are not showing up for me. I think they’ve got lost in the whole coding of the page. While following along, I also noticed the same issue over on the How To Create Your Own Social Media Icons Using Picmonkey post (step 13). Could you please add those tags with spaces added, maybe, or shown in an image? THANK YOU so, so, SO much!!

    • THANK YOU! I did have some problems with the tag before the html, but after some Googling, it looks like the tag should read . This fixed my centering problem!

  70. Followed your instructions to a T. Created & mapped the header image & nav bar I want on my site. Don’t understand how to implement it on my site. Can you help? Creating the image was fun. I love learning new things. Now I’m stumped.

  71. Awesome tutorial! Can’t wait to try this out later for a new header/nav bar/social media combo. Going to look at your other posts now :) Thanks a bunch!

  72. I just starting blogging a couple of months ago and I have been stressing out about making a navbar for the longest time and your tutorial was a lot of help. Finally got my navbar up and running and I even decided to give you a little shout out in a blog post I did about it because I was so proud of myself! Thanks again so much.


  73. Thank you for the turorial! You just made my header so much better and I appreciate it! I have no idea what I am doing when it comes to customizing. PicMonkey will be my new best friend!

  74. This was so helpful! I was so confused, but this article definitely helped!

    Have a great day!

  75. Oh so very helpful! Your tutorials for image mapping were broken links by the way. People can go to image-maps [dot] com and it’s pretty self-explanatory about how the linking works.

    This was so easy it’s almost a crime :D

  76. Hi Ashton! I’m using your tutorials to set up my blog. They are a God-send! Thank you! I wondered if you could tell me where I can create/find cute little pictures like your garland and mixer that you have in your header? Thanks so much for these tutorials!!!!

  77. Thank you so much for this! I have recently found your blog and have used many of your tips and tutorials. Question for you with this one – I have it all set up on my blog and it looks great. But now, when I look at the blog from a mobile device, there is no header at all… any suggestions about this? Did I do something wrong or will mobile not pick up the html code from Image-Maps?

    Thank you again for this post! It’s terrific! I love the look it has given me! I appreciate any help you can give about the mobile header! THANKS! :)

    • It sounds like something isn’t right (although, I’m so sorry– I don’t have the foggiest idea), because Image Maps HTML should still display on your mobile….

  78. Thank you for this help! Just wanted to let you know that there are broken links on your site, I was trying to click on the link to the image-maps tutorial. I am guessing this might have happened if you removed dates from your blog posts at some point. Thought I’d give you a head’s up in case you didn’t realize yet.

  79. Hi Ashton! Thank you so much for the tutorials! I’m trying the nav bar right now but the link to the image maps tutotial is broken and don’t know how to do it. Could you help please?

  80. Thank you so much for this tutorial! I’ve been wanting to create a custom header and your post made this just as easy as using a stock header.  Next up, the nav bar :)

    Thanks again!!!

  81. thank you very very much for this post, I have just used it to create my own! also added this to my favourites page so I can come back to it when I change my layout! xx

    Hannah | Heyitshannaah

  82. Hi! I am a very new blogger and stumbled across this post and created a Picmonkey navigation bar image and an image map! Thanks for the help. I do have one question. When I created the image I made the map fit perfectly with the links I wanted to be clickable. After installing the HTML code in the navigation bar gadget, I had to move my header a bit using CSS to get it in the right spot. (The image was not centered when I entered the HTML) Because of this moving, the image map is not exactly in the right place and I don’t know how to fix it! In my navigation bar now, only the first letter of the words are clickable!

    Thanks so much for your help! 


Comments are closed.