Custom Header & Footer Navigation

Why Custom Navigation Matters

Visitors who land on your blog from search should feel like they never left your main site. When your blog uses a different header or footer, it creates a disconnect. People notice. They trust your content less, they navigate away faster, and they rarely click through to your product pages.

Most blogging platforms force you into their navigation template. You get a generic header with their branding conventions, and your visitors immediately know they're on a third-party tool. That breaks the experience you spent months building on your main site.

Superblog gives you full control. Paste your own header and footer HTML, and your blog becomes indistinguishable from the rest of your website.

How It Works

Paste your HTML, CSS, and JavaScript: Go to Settings > Menu > Use Custom (checkbox) in your Superblog dashboard. You'll find dedicated fields for custom header and custom footer. Paste the same markup your main site uses.

Full language support: Use plain HTML for structure, CSS for styling (inline or via style tags), and JavaScript for interactive elements like dropdown menus, mobile hamburger toggles, or search bars. No restrictions on what you can build.

Replaces the default navigation: When you add a custom header, it replaces Superblog's default nav entirely. Same with the footer. You're not fighting with two layers of navigation. Your code takes over completely.

Works across all pages: Your custom header and footer appear on every page of your blog, including the homepage, individual posts, category pages, tag pages, and search results.

Load external resources: Need to pull in a font from Google Fonts, an icon library, or your site's shared stylesheet? Include external CSS and JS links directly in your custom header code. Everything loads as part of the page.

Common Use Cases

• Match your marketing site nav: Copy the header and footer from your main site so visitors move between your product pages and blog without noticing a transition.
• Add product CTAs to your header: Include signup buttons, demo links, or pricing page links directly in the blog navigation. Every blog reader is one click from converting.
• Mobile-responsive menus: Bring your existing hamburger menu, slide-out drawer, or responsive nav. Your JavaScript runs natively, so mobile interactions work exactly as they do on your main site.
• Footer with company info: Include your legal links, social media icons, newsletter signup, office address, and support links in a consistent footer across your blog and main site.
• Multi-brand or white-label blogs: Agencies running blogs for multiple clients can give each blog a completely unique look and feel with different headers and footers per site.

The Result: A Blog That Feels Native

When custom navigation is combined with subdirectory hosting (yoursite.com/blog), your blog becomes a seamless extension of your website. Same domain, same header, same footer, same brand experience. Visitors and search engines treat it as one unified site.

No iframes. No clunky embeds. No "powered by" branding. Just your content, your navigation, your brand.