Tumblr Menu Tutorial

In this tutorial I am going to show you how to install one of our menus themes with the Tumblr blogging service. We are not coding menus from scratch, but instead will be building a menu in our Menu Maker and then importing that menu into your Tumblr theme.

Note:
Tumblr doesn't allow you to upload images to your theme so make sure to choose a menu that doesn't use any images. Check out the Pure CSS Menu section for menus that don't use images.

Find a Menu Template

First you should take a look at our library of css menus. We have a variety of structures and styles available:

Once you find a menu that will work well with your Tubmlr theme, click the Customize/Download button to customize the menu in our Menu Maker.

Customize your Menu

Now that you are in the Menu Maker you will have a lot of options to customize the design and structure of your menu. On the left hand side you can drag and drop to rearrange your menu items and create sub menus. Most of our menus also have color options so you can pick a custom color to match your Tumblr blog. If you need help using the Menu Maker, click the help icon in the bottom right corner of the screen.

Tumblr Menu Tutorial

Copy the CSS Code into Tumblr

Once you have customized your menu, it is time to copy the CSS over to your Tumblr theme. Before heading over to your Tumblr blog, click the CSS tab in the Menu Maker to view the CSS code. Select all the available code and copy it.

Tumblr Menu Tutorial

Keep the Menu Maker window open that has your customize menu and then open up a new window with you Tumblr blog. If you are logged in as the administrator you should see a Customize link in the top right corner of the screen. If you don't see this you will need to login.

Tumblr Menu Tutorial

Click the Customize link to be taken to the theme customization page. This page should have a dark sidebar on the left hand side of the page with the name of your theme and some customization options. At the bottom of this sidebar is a link called Advanced. Click this link to expand the advanced options.

Tumblr Menu Tutorial

Once the advanced options are expanded you should see a text box at the bottom that says Add custom CSS. This is where you will want to paste the CSS code from your customized menu.

Tumblr Menu Tutorial

After you paste your custom menu code, click the green Save button at the top of the Tumblr theme sidebar. You have now just successfully imported the custom CSS code into your Tumblr Blog. Now we move onto the tricky part, pasting in the HTML.

Copy the HTML Code into Tumblr

This part of the tutorial will vary depending one where you want your menu to display on your Tumblr blog. The Tumblr HTML file is usually very large so knowing exactly where to place the HTML code for your menu might be less than clear. The easiest way I have found is to look at your Tumblr blog with a web inspector. If you don't know what a web inspector is, check out our Web Inspector Roundup post. I am using the Chrome browser so a web inspector is available by default. To get an idea where I want my menu I just right-click my Tumblr page where I would want my menu to roughly show up, and then click Inspect Element:

Tumblr Menu Tutorial

I am using a horizontal, drop down menu for this example so I want my menu to show up at the very top of my Tumblr blog. Once I click Inspect Element I see that the HTML area I clicked is right around the main title for the blog which has and ID of blog_info

Tumblr Menu Tutorial

Placing the menu HTML here should make my menu show up at the very top of my Tumblr theme. Now, go back to the Tumblr appearance sidebar and click the button that says Edit HTML:

Tumblr Menu Tutorial

You should now be looking at the complete HTML file for you Tumblr theme. Do a quick search for the identifying ID we saw earlier, mine was blog_info. Yours will most likely be different from mine depending on what Tumblr theme you are using.

Tumblr Menu Tutorial

Now that you have found the correct spot to place your menu HTML, head back to the Menu Maker screen and click the tab that says HTML. This the HTML code for your custom menu. Select it all and copy/paste it into your Tumblr HTML file. Once your are finished click the Update Preview button in Tumblr to see if your menu is working correctly. If it doesn't show up exactly where you wanted it to, play around with the HTML placement until you find the right spot.

Conclusion

There you have it. If everything went correctly you should have a brand new CSS menu for you Tumblr blog. If you don't understand part of the tutorial or run into issues, please let me know in the comments and I will try to help you out.