How To Add a Sticky Header to Carrd (CSS Tutorial)

Step-by-step guide to adding a sticky header to your Carrd website using CSS. Works on Pro Standard and Pro Plus plans with embed code.

DragosJuly 9, 20269 min read

A sticky header keeps your navbar pinned to the top of the screen as visitors scroll. It’s a standard pattern on most websites, but Carrd doesn’t have a built-in toggle for it. You need to add it yourself with a small CSS snippet.

This guide walks you through the full process. You’ll need a Pro Standard plan ($19/year) or higher, since that’s the lowest tier that supports custom code embeds.

Carrd Plugins and Themes

More Carrd tutorials:

The complete list of Carrd plugins, themes, and tutorials is on carrdme.com.

Prerequisites

Feature	Pro Standard ($19/yr)	Pro Plus ($49/yr)
Custom code embeds	Yes	Yes
Set custom element IDs in settings	No (use browser inspect)	Yes (Advanced Settings tab)

Both plans work. The difference is how you find the container ID — more on that in step 2.

1. Set page padding to zero

Open your Carrd site in the editor and click the Page element. In its appearance settings, set both vertical and horizontal padding to 0.

If you skip this, the fixed navbar will have incorrect sizing and won’t line up with the edges of the page.

Carrd page settings showing padding options

2. Get the container ID

Your navbar elements should be wrapped in a Container element. You need that container’s ID to target it with CSS.

Pro Plus users: Open the container’s settings, go to the Advanced Settings tab, and set a custom ID (e.g., navbar). Use that ID in the CSS below.

Pro Standard users: You can’t set custom IDs, but you can find the auto-generated one. Right-click your navbar container in the browser preview, choose Inspect, and look for an ID like container01 or container02 on the <div> element. The video above shows this process in detail.

3. Add the CSS code

Add a new Embed element to your Carrd site. Set its type to Code and style to Hidden and Head. Then paste one of the snippets below.

Sticky on all screen sizes

<style>
  #container01 {
    position: fixed !important;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
  }
</style>

Sticky only on screens wider than 600px

<style>
  @media screen and (min-width: 600px) {
    #container01 {
      position: fixed !important;
      z-index: 99;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
</style>

Replace #container01 with your actual container ID.

What the properties do:

position: fixed — removes the element from normal flow and pins it to the viewport.
!important — overrides Carrd’s default positioning styles.
z-index: 99 — keeps the header above other content.
top: 0; left: 0 — anchors it to the top-left corner.
width: 100% — ensures it spans the full viewport width. Without this, the header may not cover the entire page.

4. Add a spacer below the header

When you make an element position: fixed, it’s removed from the normal document flow. This means the content below it slides up and hides behind the navbar.

To fix this, add a Divider element right after your header container. Set its top margin to roughly match the height of your navbar. You can adjust this separately for desktop and mobile in the Divider’s appearance settings.

Alternatively, you can add top padding to the next container below the header, but using a Divider gives you more control over responsive spacing.

5. Save and test

Publish your changes and check the result:

Does the header stick to the top when you scroll?
Does it span the full width of the page?
Is the content below visible (not hidden behind the header)?
On mobile (if you used the responsive snippet), does the header scroll away normally?

Troubleshooting

Header doesn’t span full width: Make sure left: 0 and width: 100% are in your CSS. Also check that page padding is set to 0 (step 1).

Content is hidden behind the header: You need a spacer. Add a Divider with appropriate top margin, or add padding-top to the next element.

Header flickers or jumps on load: This can happen if Carrd’s page animations conflict with position: fixed. Try removing the page-level animation or adding the class is-ready to your header container.

Header overlaps on mobile but looks too tall: Use the @media version of the CSS to disable the sticky behavior on small screens, or reduce the container’s padding in the mobile layout.

z-index doesn’t seem to work: Make sure there’s no parent element with overflow: hidden that could clip the fixed header. Also try increasing the z-index value (e.g., 9999).

When to use Carrd’s built-in Header Marker instead

Carrd has a native Header Marker control that makes a header region visible on every section. If you’re using Sections and just need the header to appear on all pages (not stick during scroll), the Header Marker is the simpler solution — no custom code needed.

Use the sticky CSS approach when you want the header to stay pinned at the top of the viewport as the visitor scrolls through a long single-page site.

Table of Contents