Use your own header and footer HTML

Dashboard > Settings > Menu

By default your blog uses Superblog's own navigation menu and footer. If you want your blog to carry the exact same header and footer as your main website, you can paste your own HTML instead. Superblog renders your HTML in place of its header or footer on every page of the blog.

This is an advanced feature. It is meant for teams that already have a header and footer built for their website and want the blog to match it exactly.

Turn it on

  1. Go to Settings > Menu.
  2. For the header, stay on the Header tab and check Use custom header. For the footer, open the Footer tab and check Use custom footer.
  3. Paste your HTML, including any <style> and <script> blocks it needs, into the editor.
  4. Click Preview to see how it renders.
  5. Click Save header HTML or Save footer HTML.
  6. Deploy your blog to make the change live.

To go back to Superblog's own header or footer, uncheck the box. This deletes the saved HTML, so keep a copy if you may need it again.

What your HTML must contain

Superblog checks the HTML when you save it. The rules are:

  1. The header HTML must contain a <header> or <nav> element. The footer HTML must contain a <footer> element.
  2. Every tag must be closed properly. An unclosed or mismatched tag is rejected.
  3. Each field can hold up to 500 KB.
  4. Styles inside a <style> block must only target your own markup. Every selector must start with a class or an id from your HTML, for example .my-nav a. Selectors such as body, html, :root or * are rejected, because they change the rest of the blog. Site-wide styles belong in Custom CSS instead.
  5. External stylesheets are not allowed, with one exception: font stylesheets from Google Fonts, Bunny Fonts and Adobe Fonts.

Do not use position: fixed on your header

Use position: sticky for a header that should stay pinned to the top of the page. Do not use position: fixed.

A fixed element is taken out of the page flow, so it takes up no space of its own. The blog content then starts at the very top of the page, underneath your header, and the first title on every page ends up hidden behind it. A sticky header stays pinned while readers scroll, exactly like a fixed one, but it also reserves its own space, so the blog content starts below it.

If your header CSS says position: fixed, change it to position: sticky and keep top: 0. The dashboard warns you when you save a header that still contains position: fixed.

Things to know

  1. Your HTML replaces the whole header or footer. The menu items, the logo and the search box that Superblog would normally draw are not added to it. Put everything you want to show inside your own HTML.
  2. Interactive parts such as dropdowns, mobile menus and modals depend on your own JavaScript. Test them on the live blog after deploying.
  3. Custom CSS and JavaScript in your HTML can conflict with the blog's own styling. If something on the blog looks wrong after you add a header or footer, remove it to confirm the cause.
  4. Links in your HTML should be absolute URLs, for example https://my-website.com/pricing, so they work from every page of the blog.
  5. If your blog runs on a custom template, the template's own navigation and footer are used and the pasted HTML does not apply.

Add scripts instead

To add analytics, chat widgets or other scripts without replacing the header or footer, see Add custom CSS and scripts.

Previous Article Edit your footer
Next Article Use your own homepage