Create a horizontal navigation menu using images

A navigation menu is one of the most important things for any website or blog. Think of all the different areas on your blog – all the posts, pages and topics. You want your readers to easily find their way around and to be able to find what it is they are looking for. A great navigation bar or menu can do this! There are so many way you can add navigation to your blog like with a drop down menu. Todays tutorial will show you how to add a horizontal navigation menu to your blog including images.

I would recommend only using an image navigation if you are using photos or graphics… if you’re just using text with a background then I would recommend a styled text navigation using custom font.

horizontal navigation menu to your blog using images – Method 1

  1. Design your Images – Like with social media buttons, you’ll need to find some images to use. You could search online for some but if you’re going to use somebody else’s, you need to check their policies and copyright. You could create your own using GIMP (free alternative to Photoshop). Once you have your images, you’ll need to upload them to a hosting site such as Photobucket.
  2. On Blogger – Click Layout > Add a new gadget > HTML/Javascript and paste the code below, filling in your details such as size, links and images.
<table width="TOTAL WIDTH OF NAV BAR" height="TOTAL HEIGHT" cellspacing="0" cellpadding="0" border="0" id="Table_01">
<tbody><tr><td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 001" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 002" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 003" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 004" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 005" /></a></td>
</tr>
</tbody></table>

horizontal navigation menu to your blog using images – Method 2

  1. Similarly to above, you need to upload your images to a hosting site. Take note of the width and height of the images.
  2. On Blogger, click Layout > Add new gadget > HTML/Javascript and name it “NAVBARIMAGE”, you can delete or change this later. It’s just used to help with editing the HTML. The add the following code for as many links as you’d like. Add them one after another without any spacing, like shown. Fill in the details of the link and the width & height of the image you uploaded.
<a href="URL"><img src="DIRECT IMG URL 001" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a><a href="URL"><img src="DIRECT IMG URL 002" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>

Fixing the margins & padding for a horizontal navigation menu

On Blogger, click Template > Edit HTML and search for NAVBARIMAGE. You’ll see HTML#, note this. Close the Edit HTML and go to Template > Customise > Advanced > Add CSS. Paste the following code, changing # to whatever number is shown on your template. Margin-bottom will add space between the navigation bar and start of your blog posts. You can edit padding & margin depending on how you want it to look.

 HTML# { padding: 0px; margin-bottom: 10px; } 

Related Posts

Buy me a coffeeBuy me a coffee

26 Comments

  1. Wonderful post…your blog is very good.;)
    Maybe follow each other on bloglovin?
    Let me know follow you then back.
    Lovely greets Nessa

  2. When you have to put the sizing in, what form is it? cm, mm, etc. I’m really confused! Thanks 🙂

  3. Hi ! 🙂

    After all, your site is super, really helpful. I followed your tuto and it’s work but i want to align my menu with the post body, you can see it on blog.

    Can you help me for please ?

    xoxo

    1. Hello, you can alter the code widths and padding but a good idea would be to find the size of your blog content and create the images so that together they equal that width. That will give you the best effect.

  4. Is there a way to make the nav bar flesh with the very top of the page using this code? Also, I want to make the nav bar AND my social media icons on the same line BUT I need them to be spaced more…light my social media icons aligned to the right of the page and the nav bar centered.

    http://www.lulabelleblog.com

    1. Use the first part of this post – make top navigation bar fixed/sticky to make the bar flesh with the top of the page. Wrap your navigation and social media icons in separate divs such as <div id="navigationbar"> CODE FOR NAV GOES HERE </div> <div> id="socialnav"> CODE FOR SOCIAL MEDIA NAV HERE </div> that way you can position them separately.

      I’d recommend not using an image navigation but a regular text navigation for this since you aren’t actually using photographs or anything like that. A text navigation can be styled exactly as yours is now but will give you more flexibility to customise it.

  5. If I wanted to create horizontal navigation without pictures, would I use the same code, just without the image part?
    Thanks!

      1. Isn’t there a way to have text and image navigation together?
        Like, just the home button being the picture and a few tabs and then social media icons with links?

        1. Yes, of course! Just combine the tutorials to include an image, navigation links and social icons. You can add them all under one ul or multiple ones, it’s up to you!

      1. Thank you for getting back to me! I’ve created my navbar as an image to fit the width of my layout, so that part should be taken care of. I placed the image as an html/Java Script gadget that is currently below my header. But if i just want the navbar to simply be placed at the very top of my blog above my header, but not stick when I scroll down, how can I get it to do that? I hope you can help. Thanks!

  6. Hi! First, I want to thank you for this tutorial and next, I want to know how to reduce the space between the images?
    Thank you! x

  7. WOW! Thank you very much, I have looked repeatedly for something like this that works and tried so many different methods with no avail in the end, even my text book didnt help. But this worked great!! Thanks again.

  8. Hey Ellie, I love your tutorials!

    I was just wondering how I can add this code without the images to my blog, give it a CSS code name so I can edit the elements in the CSS section (e.g. centering it etc) and have a solid line running right underneath it?
    Its a lot I know, but I really appreciate your help if you have the time 🙂

    Caitlin x

    1. Hello Caitlin, do you mean how can you add a menu without the images? I have a few navigation tutorials here for that. If that isn’t what you mean could you explain further and I will help you.

Sorry, comments are closed!