How to build a header (logo + menu) in a Blogger theme

The header is the first thing readers see and the navigation hub of the whole site. A good header makes the site look professional and easy to use on every device. This article teaches you how to set up the header in a Blogger theme with BlogKub, including the logo, multi-level menus, mobile menu, search button, sticky, and an automatic mobile bottom bar, with no coding.

Updated 16 July 2026   About a 10 minute read   Level: Beginner

What a header is, and why it matters

A header is the top bar of the site with the logo, blog name, and navigation menu. It appears on every page, so it is both the brand's face and the navigation hub. Readers use the header to know what site they are on and to reach the site's sections. A well-designed header therefore affects both the first impression and ease of use.

The header's challenge is working well on both large and small screens. On desktop there is room for a full horizontal menu, but on mobile it has to collapse compactly while staying easy to use. BlogKub handles this complexity automatically. You set up the menu once and the system adapts the display to each device itself.

Logo and blog name: syncing with SEO and schema

The header lets you add both a logo image (via URL) and blog name text. The refined part is that both values sync to the SEO settings and schema automatically. The blog name becomes the site name in the SEO data, and the logo URL becomes the Logo in the Organization schema, which Google uses to build the brand's Knowledge Graph.

This consistency matters, because it keeps your brand info the same across the site, with no repeated entry and no risk of mismatched typing. For the logo, a transparent PNG around 512×512px and under 200KB is recommended, to be crisp and load fast. Set it once and the header, footer, and schema all use one consistent set of data.

How to set up the header, step by step

1. Add or select the header block. If you already picked a template, it usually ships with a header block, or add the "Header" block yourself.
2. Add the logo and blog name. Paste the logo image URL and type the blog name, which syncs to SEO and schema automatically.
3. Arrange the menu and mobile options. Use the menu manager to add, remove, rename, reorder, and create submenus, choose the mobile menu side (left/right), turn on the search button, set sticky, and enable the mobile bottom bar as you like.
4. Export the XML and check on every screen. Click Export, upload it to Blogger, then view the header on both desktop and mobile, confirming the menu, search button, and bottom bar work correctly.

Multi-level menus: organize your content tidily

BlogKub's menu manager lets you build menus freely, adding, removing, renaming, and reordering by dragging. A key highlight is submenu (dropdown) support, letting you organize content into layers, such as a main "Articles" menu with submenus for "Travel", "Food", and "Reviews" inside.

Submenus are very valuable for sites with many categories, because they keep the main menu bar from getting too long and cluttered, and help readers see the site's content structure clearly. Instead of a dozen menu items in a row, you group them under a few main menus, keeping it both clean and easy to find. You can also toggle icons in front of menu items, to add interest and help readers remember menus by their symbol.

The mobile menu: hamburger + automatic bottom bar

On mobile, limited space makes a full horizontal menu unusable, so BlogKub handles it automatically with two elements working together.

• Hamburger button + slide panel: the menu collapses to a three-line button, and tapping it slides a menu panel out from the side. You choose whether it slides from the left or right as you prefer. This panel shows all menus, including submenus.
• Bottom navigation bar: a bar pinned to the bottom of the screen on mobile, showing key items like home, search, menu, mode, and share, so readers tap with a thumb conveniently without reaching to the top. It appears automatically when enabled.

Having both makes mobile readers navigate very conveniently. The bottom bar puts frequent actions within thumb reach, while the hamburger panel holds all menus for when they want the full list. This is the standard of modern apps and sites that BlogKub brings to your Blogger blog without you designing it yourself. To understand the whole menu customization picture, read more on the About BlogKub page, which describes the menu system.

Search button and sticky: navigate anytime

The header also has extra options that raise navigation. The first is a search button that lets readers call up a search box straight from the header, good for content-heavy sites where search matters, and pairs well with the search box. The second is sticky, which keeps the header pinned to the top edge as you scroll down.

The benefit of sticky is that the menu and search button are within reach at all times. A reader who scrolled far down and wants another page can go there immediately without scrolling back to the top, greatly reducing navigation friction, especially on long pages. That said, on mobile where the bottom bar already exists, consider whether you need the header sticky too, so it does not take up too much screen space.

The header, first impressions, and branding

The header is where the first impression forms. A clear logo and name tell readers immediately who the site is and what it is about. An orderly, easy-to-use header signals the site has standards and is credible. Conversely, a cluttered header or confusing menu makes readers feel bad from the first second.

Because the header appears on every page, it is what builds the brand identity readers see repeatedly until they remember it. A consistent logo, colors that match the theme, and a stable menu give your site a clear identity. Used with a consistent footer, your site feels like a deliberately designed product, not a blog thrown together casually.

Common problems and how to fix them

The logo does not show or is blurry

Check that the logo image URL is correct and reachable. Use a transparent PNG of a suitable size (around 512×512px). Too small an image gets blurry when scaled.

The submenu does not open

Check that you structured the submenu correctly under the main menu in the menu manager, and Export again. On mobile the submenu shows in the hamburger panel.

The bottom bar does not appear on mobile

Check that you enabled the bottom bar option, and view it on a real mobile screen, because this bar is designed for mobile and does not show on desktop.

The header covers content when sticky

This is normal sticky behavior, with the header floating over. The system already reserves spacing for content. If it feels like it takes too much space on mobile, consider turning off sticky on small screens or using the bottom bar instead.

Best practices

• Use a good-quality transparent PNG logo and set a clear blog name, because they sync with SEO/schema.
• Keep the menu concise, using submenus to group categories instead of an overly long main menu.
• Choose the mobile menu side to suit the hand most readers hold with (right is often convenient).
• Enable the mobile bottom bar for convenient thumb navigation.
• Test the header on both desktop and mobile before publishing every time.

Wrapping up

The header is both the brand's face and the navigation hub that appears on every page. With BlogKub, you set up the header fully with no coding, including a logo and blog name that sync with SEO/schema, multi-level menus with submenu support, a hamburger mobile menu with a choice of side, an automatic mobile bottom bar, a search button, and sticky top. The system handles the display for every device itself. When you set it up tidily and test on every screen, your header makes the site look professional, easy to use, and creates a good first impression for readers every time they arrive.

Frequently asked questions (FAQ)

Part of the BlogKub feature guide series. Content and schema (TechArticle + FAQPage) ready to publish on blogkub.com.