Blogger Navigation Menu Setup That Works on Mobile Too

Your Blogger template looks tidy on a laptop, but the menu either disappears on a phone or stacks into a long column of links that pushes your first post below the fold. Readers on mobile, often 60 to 75 percent of a small blog's traffic, never find your best categories.

A Blogger navigation menu is not hard to build, but the built-in gadgets behave differently depending on which template you use, and a few small choices decide whether it works on a 390 pixel wide phone screen. I customize templates for a living, and this is the setup I use on most blogs, from a fresh install to a menu that looks clean on every device.

Before you touch the Blogger navigation menu

Back up first. Go to Theme, open the dropdown next to Customize and choose Backup. It takes 20 seconds and saves you from rebuilding a layout from memory. Our checklist on what to back up before changing your Blogger theme covers gadgets and settings that a theme backup alone does not save.

Then decide what goes in the menu. Write the list on paper. A good menu for a personal or niche blog has five to seven items:

• Home
• Three or four main topics, each pointing to a label page
• About
• Contact, if you have a contact page

Anything beyond seven items gets crowded on mobile and makes each link harder to choose. If you have 25 labels, pick the four that bring the most readers and leave the rest for the sidebar or footer.

Choosing the right gadget for your menu

Blogger gives you two gadgets that can act as a menu. Both live under Layout, then Add a Gadget, in whichever section sits below your header. In most current templates that section is called Cross-Column or Page List.

The Pages gadget

This gadget lists your static pages, such as About and Contact, and can also hold external or label links. You tick which items to show and drag them into order. It is the better choice for templates like Contempo, Soho, Emporio and Notable, because those themes are designed to turn it into a tappable mobile menu automatically.

The Link List gadget

Link List lets you add any link with any title, which makes it flexible for label pages. A label page lives at your blog address followed by /search/label/ and the exact label name, with spaces written as %20. For example, a label called Easy Dinners becomes /search/label/Easy%20Dinners. Spelling and capitals must match the label exactly or readers land on an empty page.

My rule of thumb: use the Pages gadget if your template supports it, and use Link List only when you need extra control or your theme is one of the older classic designs.

Making the menu work on mobile

This is where most menus break. Check three things on a real phone, not just the desktop preview.

1. Find the mobile setting. Go to Theme, open the dropdown beside Customize and select Mobile Settings. If you see an option for showing the desktop or mobile theme on mobile devices, choose desktop for any modern responsive template. The separate mobile theme in older setups often hides gadgets, including your menu.
2. Check tap targets. Each menu link should be at least 44 pixels tall, which is a standard minimum for comfortable tapping. Links smaller than that lead to mis-taps and frustrated readers.
3. Look at the wrap. If your menu has six items on one line on desktop, it will probably wrap onto two or three lines on a phone. That is fine if it stays neat. It is a problem if items overlap your header image or logo.

If items do overlap, the fix is usually CSS. In the Theme designer, open Customize, then Advanced, then Add CSS. Setting the menu list to display as flex with flex-wrap set to wrap, and giving each link padding of about 12 pixels top and bottom, solves most wrap problems without editing the template code. The same approach used in changing Blogger link color in any template applies here: target the gadget's class, not every link on the page.

Styling that keeps the menu readable

Keep the menu font the same family as your body text unless your template designer chose otherwise. Mixing a third font only for the menu adds load time and rarely looks better.

Why I skip dropdown menus on most Blogger blogs

Many tutorials teach you to build a multi-level dropdown menu with nested lists and hover effects. It looks impressive in a desktop demo. On a phone it often fails.

There is no hover on a touchscreen. Readers tap the parent item expecting a page and get a small submenu instead, or nothing at all, depending on how the code was written. Pasted dropdown scripts also tend to break after Blogger updates its templates, and you will not notice until a reader emails you.

The alternative is simpler. Keep the top menu flat, with five to seven links. Put deeper topics on the label pages themselves, or use a well-organized Labels gadget in the sidebar or footer. Readers who want depth will find it, and everyone else gets a menu that just works. If you want more context on safe edits, read customizing a template without breaking the layout.

Testing the finished menu

• Open the blog on at least one Android phone and one iPhone, or ask a friend.
• Tap every menu item. Confirm each label page shows posts and not an empty result.
• Turn the phone sideways and check the menu still sits neatly.
• Check a post page as well as the homepage, because some templates use different layouts for each.

Frequently asked questions

How do I add a menu bar in Blogger?

Go to Layout, find the section below your header, click Add a Gadget and choose Pages or Link List. Add your links, set the order and save. Most modern templates display the gadget as a horizontal menu automatically.

Why is my Blogger menu not showing on mobile?

Usually the blog is set to show a separate mobile theme that hides some gadgets. In Theme, open Mobile Settings and choose to show the desktop theme on mobile devices if your template is responsive. Then clear your phone's browser cache and check again.

Can I link to a label in the Blogger navigation menu?

Yes. Use the Link List or Pages gadget and add a link to your blog address followed by /search/label/ and the label name. Write spaces as %20 and match the label's spelling and capital letters exactly.