---
title: "How To Add a Sticky Header to Carrd (CSS Tutorial)"
description: "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."
date: 2026-07-09
categories: ["web-development"]
tags: ["carrd"]
---
import Button from "../../components/widgets/Button.astro";
import { Picture } from "astro:assets";
import YouTubeEmbed from "../../components/widgets/YouTubeEmbed.astro";
import imag1 from "../../assets/images/23/05/carrd-page-settings.png";
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.
**More Carrd tutorials:**
- [Add Carrd Cookie Notice](https://www.bitdoze.com/add-cookie-notice-carrd/)
- [How To Add Pricing Table to Carrd.co](https://www.bitdoze.com/carrd-add-pricing-table/)
- [Carrd.co Review](https://www.bitdoze.com/carrd-review/)
- [How To Add Accordion FAQs Drop-Down to Carrd.co](https://www.bitdoze.com/add-accordion-carrd/)
- [How To Add Custom Domain to Carrd.co](https://www.bitdoze.com/carrd-add-domain/)
- [Carrd.co Mobile Responsive Navbar](https://www.bitdoze.com/carrd-mobile-navbar/)
> The complete list of Carrd plugins, themes, and tutorials is on [carrdme.com](https://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.
## How to add a sticky header to Carrd
### 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.
### 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 `
` 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
```html
```
#### Sticky only on screens wider than 600px
```html
```
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.