---
title: "How to Create a Carrd Mobile Responsive Navbar (3 Methods)"
description: "Learn how to create a Carrd mobile responsive navbar with a hamburger menu. Covers custom HTML/CSS, native Carrd elements, and plugins. No-code options included."
date: 2026-07-23
categories: ["web-development"]
tags: ["carrd","navbar","responsive-design"]
---

import Button from "@components/widgets/Button.astro";
import Notice from "@components/widgets/Notice.astro";
import ListCheck from "@components/widgets/ListCheck.astro";
import Accordion from "@components/widgets/Accordion.astro";
import Tabs from "@components/widgets/Tabs.astro";
import Tab from "@components/widgets/Tab.astro";

import YouTubeEmbed from "../../components/widgets/YouTubeEmbed.astro";

A Carrd mobile responsive navbar is one of the first things you'll want to add if your site has more than one section. Carrd's built-in header options work fine for desktop, but they don't give you a hamburger menu on smaller screens, which is table stakes for any modern site.

This guide covers three approaches: a custom HTML/CSS embed (cheapest, most control), native Carrd elements (no code at all), and third-party plugins (drop-in features). Each has trade-offs in cost, complexity, and flexibility. If you haven't picked Carrd yet, you can read [our Carrd.co review](https://www.bitdoze.com/carrd-review/) or try it free below.

<Button link="https://go.bitdoze.com/carrd" text="Try Carrd Free (7-Day Pro Trial)" />

## Some Carrd tutorials

Before we dig in, here are related Carrd customization guides that pair well with a responsive navbar:



<YouTubeEmbed
  url="https://www.youtube.com/embed/PkZ7CYfKxSg"
  label="How to Create A Carrd.co Mobile Responsive Navbar"
/>
- [Add a Sticky Header to Carrd](https://www.bitdoze.com/add-stickey-header-carrd/) makes the navbar stay visible on scroll
- [Add a Floating Menu to Carrd](https://www.bitdoze.com/carrd-floating-menu/) is a different navigation pattern worth considering
- [Add a Sidebar Menu to Carrd](https://www.bitdoze.com/carrd-sidebar-menu/) is an alternative layout for nav-heavy sites
- [Add Smooth Scroll and Anchor Links to Carrd](https://www.bitdoze.com/carrd-smooth-scroll/) pairs directly with anchor-based nav links

## What you'll need

<Notice type="info" title="Carrd Plans">
Carrd's plan tiers matter here. **Pro Standard** ($19/year) unlocks the Embed element you need for Method 1. **Pro Plus** ($49/year) unlocks Visibility settings for Method 2. Method 3 plugins work on Pro Standard plus the plugin cost. All paid plans include a **7-day free trial** with no credit card. Carrd also runs 40% off Black Friday sales if you want to time your upgrade.

Read more: [Carrd plans and pricing](https://carrd.co/docs/pro/plans) | [Full Carrd review](https://www.bitdoze.com/carrd-review/)
</Notice>

| Plan | Price | Sites | Embeds | Visibility Settings |
|---|---|---|---|---|
| Free | $0 | 3 | No | No |
| Pro Lite | $9/yr | 3 | No | No |
| **Pro Standard** | **$19/yr** | 10 | **Yes** | No |
| **Pro Plus** | **$49/yr** | 25 | Yes | **Yes** |

<ListCheck>
<ul>
  <li>A Carrd account (free to start)</li>
  <li>Pro Standard ($19/yr) for Method 1 and Method 3, or Pro Plus ($49/yr) for Method 2</li>
  <li>A Carrd site with at least 2-3 sections set up</li>
  <li>Browser with dev tools for testing responsiveness</li>
</ul>
</ListCheck>

## Which approach is right for you?

Quick decision guide. Pick the path that matches your situation:

<Tabs>
<Tab name="Custom Code">
**Best for**: Full control, lowest cost, animated hamburger toggle.

- **Plan needed**: Pro Standard ($19/yr)
- **Difficulty**: Medium (copy-paste code, minor customization)
- **What you get**: Animated hamburger-to-X toggle, smooth open/close transition, full CSS control, sticky header compatible
- **What you don't**: Changes require editing code, no visual preview in editor
</Tab>
<Tab name="Native Elements">
**Best for**: No code at all, visual editing in Carrd's builder.

- **Plan needed**: Pro Plus ($49/yr)
- **Difficulty**: Easy-Medium (more steps, but all point-and-click)
- **What you get**: Edit everything in the Carrd editor, visual preview, no embed code to manage
- **What you don't**: No animated toggle, not naturally sticky, more setup steps
</Tab>
<Tab name="Plugins">
**Best for**: Extra features like multi-level dropdowns without writing code.

- **Plan needed**: Pro Standard ($19/yr) + plugin cost
- **Difficulty**: Easy (install and configure)
- **What you get**: Feature-rich navbars, multi-level menus, maintained by plugin author
- **What you don't**: Ongoing cost dependency, less customization than hand-written code
</Tab>
</Tabs>

## Method 1: Custom HTML/CSS embed (code-based Carrd navbar)

This is the approach I use. It gives you the most control over the Carrd hamburger menu behavior and styling, and it only needs Pro Standard ($19/year). The trade-off is you're editing HTML/CSS directly.

### How the checkbox hack works

The toggle mechanism uses a hidden checkbox and a `<label>` element. When you click the label (styled as a hamburger icon), it toggles the checkbox. CSS then targets the sibling menu using `#menu-toggle:checked ~ .menu`. The `~` is the general sibling combinator, meaning "select `.menu` that is a sibling after the checked checkbox."

It's a pure-CSS toggle. No JavaScript needed for the open/close itself. The JS only handles closing the menu when you click a nav link or the close button.

The checkbox hack is a dated pattern (it has accessibility trade-offs we'll cover below), but it works reliably in Carrd's embed environment where you can't easily inject a `<button>` toggle with proper ARIA state management.

### Step 1: Set up the container

In Carrd's editor, add a **Container** element with 2 columns. Split it roughly 25%/75%:

- **First column**: Your logo (an Image or Text element)
- **Second column**: The embed widget (next step)

Choose a background color for the container that matches your header design. This won't affect the navbar code itself.

### Step 2: Add an embed widget

In the second column, add an **Embed** element. Name it something like `navbar-embed`.

<Notice type="info" title="Embed Placement Tip">
Carrd supports 4 embed placement options: **Inline** (default, code goes where the element sits), **Hidden → Head** (code goes in `<head>`), **Hidden → Body Top**, and **Hidden → Body End**.

For best results, split your code into two embeds: put the `<style>` block in a **Hidden → Head** embed (prevents flash of unstyled content), and the HTML + JS in an **Inline** embed. If you want to keep it simple with one embed, the Inline approach works. It's what the original tutorial used.

See the [Carrd embedding docs](https://carrd.co/docs/building/embedding-custom-code) for details.
</Notice>

### Step 3: Add the HTML, CSS and JavaScript

Below is the complete updated code. It fixes several bugs from the original version, adds accessibility attributes, uses a smooth `max-height` transition instead of `display: none/block`, and scopes the CSS reset to avoid breaking Carrd's built-in styles.

<Tabs>
<Tab name="Complete code">

**If using two embeds (recommended):** Put the `<style>` block in a Hidden → Head embed, and the rest in an Inline embed. **If using one embed:** Paste everything below into a single Inline embed.

```html
<style>
  :root {
    --mbm-main-font: inherit;
    --mbm-font-size-base: 18px;
    --primary-color: #200eed;
    --secondary-color: #fff;
  }

  /* Scoped reset — only affects nav and its children */
  nav, nav * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Navigation styling (desktop) */
  nav {
    position: relative;
    color: var(--secondary-color);
    background-color: var(--primary-color); /* blue header */
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: var(--mbm-main-font);
    font-size: var(--mbm-font-size-base);
  }

  .menu {
    list-style: none;
    display: flex;
  }

  .menu li a {
    display: block;
    color: var(--secondary-color);
    text-decoration: none;
    padding: 10px 15px;
    position: relative;
  }

  .menu li a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease-in-out;
  }

  .menu li a:hover::after {
    width: 100%;
    left: 0;
  }

  /* Hamburger styling */
  .hamburger {
    display: none;
    cursor: pointer;
  }

  .hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: 5px 0;
  }

  /* Hide checkbox */
  #menu-toggle {
    display: none;
  }

  /* Close button — hidden by default */
  .close-button {
    display: none;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--secondary-color);
    cursor: pointer;
    z-index: 1001;
    padding: 5px;
  }

  /* Mobile styles */
  @media (max-width: 768px) {
    .hamburger {
      display: block;
    }

    .menu {
      position: absolute;
      width: 100%;
      top: 100%;
      left: 0;
      background-color: var(--primary-color);
      text-align: center;
      padding: 20px 0;
      z-index: 999;
      flex-direction: column; /* not in a row — stacked vertically */
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
    }

    .menu li {
      width: 100%;
    }

    .menu li a {
      padding: 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .menu li:last-child a {
      border-bottom: none;
    }

    /* Show menu when checkbox is checked */
    #menu-toggle:checked ~ .menu {
      max-height: 500px;
      opacity: 1;
    }

    /* Show close button + hide hamburger when open */
    #menu-toggle:checked ~ .close-button {
      display: block;
    }

    #menu-toggle:checked ~ .hamburger {
      visibility: hidden;
    }
  }
</style>

<nav role="navigation" aria-label="Main navigation">
  <input type="checkbox" id="menu-toggle" />
  <label for="menu-toggle" class="hamburger" aria-label="Toggle menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </label>
  <ul class="menu" role="menubar">
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <button type="button" class="close-button" aria-label="Close menu">×</button>
</nav>

<script>
  // Close menu when close button is clicked
  document
    .querySelector(".close-button")
    .addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });

  // Close menu when a nav link is clicked
  document.querySelectorAll(".menu a").forEach(function (link) {
    link.addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });
  });
</script>
```

</Tab>
<Tab name="Code walkthrough">

**CSS custom properties** (`:root` block):
- `--primary-color`: Background color of the mobile dropdown menu
- `--secondary-color`: Text and icon color
- `--mbm-font-size-base`: Base font size for menu items
- Change these to match your site's design

**Scoped reset** (`nav, nav *`):
The reset only applies to the nav element and its children, so it won't mess with Carrd's spacing on other elements.

**Desktop styles** (`.menu`, `.hamburger`):
On screens wider than 768px, the menu displays as a horizontal flex row. The hamburger is hidden (`display: none`).

**Mobile styles** (`@media max-width: 768px`):
- Hamburger becomes visible
- Menu switches to a full-width dropdown with `max-height: 0` (hidden)
- When checkbox is checked (`#menu-toggle:checked ~ .menu`), `max-height` expands to 500px with a smooth transition
- Close button appears in the top-right corner of the dropdown

**JavaScript**:
- Closes the menu (unchecks the checkbox) when the close button or any nav link is clicked
- No external libraries, no dependencies

**Key values to adjust**:
- `top: calc(15px + 6em)` controls where the dropdown appears. Adjust `6em` to match your header height
- `z-index: 999` keeps the menu on top of other elements
- `768px` breakpoint. Change this if your site needs a different mobile breakpoint

</Tab>
</Tabs>

### Customizing the navbar

Quick reference for common changes:

- **Colors**: Edit `--primary-color` and `--secondary-color` in the `:root` block
- **Font**: Set `--mbm-main-font` to a font-family value (e.g., `'Inter', sans-serif`)
- **Menu items**: Replace the `<li><a href="...">` entries with your own section links
- **Breakpoint**: Change `768px` in the `@media` query to target a different screen width
- **Dropdown position**: Adjust `top: calc(15px + 6em)` to match your actual header height
- **Transition speed**: Change `0.4s` in `transition: max-height 0.4s ease-in-out`

If your nav links point to sections on the same page, add [smooth scrolling for Carrd anchor links](https://www.bitdoze.com/carrd-smooth-scroll/) for a polished UX.

### Accessibility notes

<Notice type="warning" title="Accessibility Trade-off">
The checkbox hack has inherent limitations: it doesn't manage focus properly, and screen readers may interpret the label as a checkbox rather than a button toggle. The updated code includes `role="navigation"`, `aria-label` attributes, and a `<button>` close element. This helps, but can't fully solve the checkbox-hack limitation.

For production sites with strict accessibility requirements, consider a `<button>`-based toggle with JavaScript (which is hard to do inside Carrd's embed constraints) or use Method 2.

For more context: [CSS & JavaScript Requirements for Accessible Components, Smashing Magazine](https://www.smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/)
</Notice>

## Method 2: Native Carrd elements (no-code responsive navigation)

If you don't want to touch any code, Carrd's built-in elements can do the job. The trick is using **Visibility settings** to show different navigation elements on desktop vs. mobile. Desktop gets a row of buttons; mobile gets a hamburger icon that jumps to a full-screen menu section.

<Notice type="info" title="Pro Plus Required">
Visibility settings (Desktop Only / Mobile Only) require **Pro Plus** at $49/year. This is the most expensive option, but the trade-off is zero code and full visual editing in Carrd's builder.
</Notice>

### How it works

Carrd lets you set element visibility per device type. You create two versions of your navigation (one for desktop, one for mobile) and Carrd shows the right one based on screen size.

### Setting up the desktop navigation

1. In your header container, add a **Buttons** element
2. Set **Layout** to **Row** (horizontal button layout)
3. Set **Visibility** to **Desktop Only**
4. Add your nav link buttons (Home, About, Contact, etc.). Each links to a section using `#section-name`

### Creating the mobile hamburger toggle

1. Add an **Icon** element to the same container (choose a hamburger/menu icon from Carrd's icon library)
2. Set the icon's **URL** to `#menu` (this will link to a section you create next)
3. Set **Visibility** to **Mobile Only**

### Building the mobile menu section

1. Add a **Section Break** at the point in your page where you want the mobile menu to appear. Label it `menu` (this creates the `#menu` anchor target)
2. Inside that section, add a **Buttons** element with **Layout: Column** (vertical buttons)
3. Add your nav link buttons — same links as the desktop version
4. Add a close **Icon** (X symbol) with its URL set to `browser:back` — this uses Carrd's built-in URL type to go back in browser history, effectively closing the menu
5. Add a **Header Marker Control** so the navigation header appears on every "page" of your Carrd site

For reference, Carrd supports these [URL types](https://carrd.co/docs/building/url-types) in buttons and icons: `#section-name`, `browser:back`, `section:next`, `section:previous`, and `browser:top`.

A free template implementing this approach is available: [Mobile navbar free Carrd template](https://carrd.co/buy/190a78e4d1467cca) by Jason Leow (requires Pro Plus).

### Pros, cons and plan requirements

**Pros:**
- No code at all — everything is edited visually in Carrd's builder
- Changes are immediate in the editor preview
- No external dependencies

**Cons:**
- Requires Pro Plus ($49/year) for Visibility settings
- More setup steps (7 major steps vs. 3 for the code approach)
- Not naturally sticky — needs extra work to stay fixed on scroll
- No animated hamburger-to-X transition
- The `browser:back` close behavior can be unreliable if the user navigated to the page from an external link

For a different no-code navigation pattern, also check out [how to add a floating menu to Carrd](https://www.bitdoze.com/carrd-floating-menu/).

## Method 3: Carrd navigation plugins (no-code, extra features)

If you want a polished navbar without writing code and the native approach feels too limiting, third-party plugins fill the gap. They're paid but well-maintained and designed specifically for Carrd.

### Nav Bar plugin

The [Nav Bar plugin](https://navbar.carrd.co/) from Jason's Plugins adds a responsive hamburger menu to your Carrd site. It handles the mobile toggle, styling, and layout — you just configure your menu items. Works on Pro Standard ($19/year) plus the plugin cost.

### Mega Nav Bar

The [Mega Nav Bar](https://plugins.carrd.co/#meganavbar) adds multi-level dropdown support. This is overkill for a simple 4-link nav, but if your Carrd site has a lot of pages or a complex information hierarchy, it's the cleanest option without building it yourself.

### Free Visibility Control plugin

The [Visibility Control plugin](https://visibility-control.carrd.co/) is free and uses a `visCtrl()` JavaScript function to show/hide native Carrd elements based on device. This effectively replicates Pro Plus Visibility settings on a Pro Standard plan — useful if you want Method 2's approach but don't want to pay for Pro Plus.

Other useful Carrd plugins include the [Carrd Tabs plugin](https://go.carrdme.com/tabs) for tabbed content and the [Carrd Accordion plugin](https://go.carrdme.com/accordion) for FAQ sections.

<Button link="https://carrdme.com/" text="Browse Carrd Plugins & Themes" />

## Method comparison: which Carrd navbar approach is right for you?

| Approach | Plan Required | Cost | Code Required | Visual Preview | Sticky Support | Multi-Level | Animated Toggle |
|---|---|---|---|---|---|---|---|
| Custom Code (Method 1) | Pro Standard | $19/yr | Yes | No | Yes (manual CSS) | Yes (manual) | Yes |
| Native Elements (Method 2) | Pro Plus | $49/yr | No | Yes | No (needs extra work) | No | No |
| Nav Bar Plugin (Method 3) | Pro Standard + plugin | $19/yr + plugin | No | Limited | Yes | No | Yes |
| Mega Nav Bar (Method 3) | Pro Standard + plugin | $19/yr + plugin | No | Limited | Yes | Yes | Yes |
| Visibility Control (free) | Pro Standard | $19/yr | Minimal (JS) | Yes | No | No | No |

**My default**: Method 1 (custom code) if you're comfortable copy-pasting HTML. It's the cheapest, most flexible, and only option that supports an animated hamburger toggle. Use Method 2 if you never want to see code and don't mind paying for Pro Plus. Use Method 3 if you need multi-level dropdowns or want a maintained plugin.

## How to make your Carrd navbar sticky

The custom code approach (Method 1) works with a sticky header. If you want your navbar to stay pinned at the top of the viewport as users scroll, follow the [sticky header tutorial for Carrd](https://www.bitdoze.com/add-stickey-header-carrd/).

The native approach (Method 2) doesn't natively support sticky positioning — you'd need additional custom CSS to make it work, which somewhat defeats the purpose of the no-code approach.

<Button link="https://go.bitdoze.com/carrd" text="Need Carrd Pro? Start Here" />

## Troubleshooting common Carrd mobile navbar issues

<Accordion label="Menu appears behind other elements (z-index fix)" group="troubleshooting" expanded="true">

The code uses `z-index: 999` on the `.menu` element. If other Carrd elements (containers, overlays, or other embeds) have higher z-index values, the menu will render behind them.

**Fix**: Increase the z-index value in the `.menu` CSS. Try `z-index: 9999`. If that doesn't work, use your browser's dev tools (right-click → Inspect) to find the z-index of the overlapping element and set yours higher.

</Accordion>

<Accordion label="Menu doesn't open on iOS Safari" group="troubleshooting">

iOS Safari can be finicky with the checkbox hack. The `<label>` element that triggers the checkbox sometimes doesn't register taps properly.

**Fixes**:
- Add `cursor: pointer` to the `.hamburger` label (this forces iOS to treat it as tappable)
- Make sure no parent element has `overflow: hidden` that could clip the tap target
- Test on a real iOS device — Carrd's mobile preview doesn't catch all Safari quirks

</Accordion>

<Accordion label="Menu position breaks with sticky header" group="troubleshooting">

The dropdown position uses `top: calc(15px + 6em)`. This is hardcoded and assumes a specific header height. If you've added a sticky header, the values may not line up.

**Fix**: Adjust the `6em` value to match your actual header height. Use browser dev tools to measure the header and tweak the `calc()` value until the dropdown sits directly below it. See the [sticky header tutorial](https://www.bitdoze.com/add-stickey-header-carrd/) for the combined setup.

</Accordion>

<Accordion label="CSS conflicts with Carrd's built-in styles" group="troubleshooting">

The updated code uses a scoped reset (`nav, nav *`) instead of the original universal `*` selector, which should prevent most conflicts. But if you still see spacing issues with Carrd's native elements, the embed's CSS may be leaking.

**Fix**: Check if your `<style>` block uses any universal selectors. If you split the CSS into a separate Hidden → Head embed, make sure all selectors are scoped to `nav` or its children. Avoid targeting global elements like `body`, `html`, or `*`.

</Accordion>

<Accordion label="Close button or menu links not working" group="troubleshooting">

If the close button (X) doesn't close the menu, or clicking a nav link doesn't close it either, the JavaScript may be running before the DOM is ready.

**Fix**: Wrap the JS in a `DOMContentLoaded` event:

```javascript
document.addEventListener("DOMContentLoaded", function () {
  document
    .querySelector(".close-button")
    .addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });

  document.querySelectorAll(".menu a").forEach(function (link) {
    link.addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });
  });
});
```

Also verify the close button is a direct child of `<nav>` (not inside `<ul>`) as shown in the updated code.

</Accordion>

<Accordion label="Menu items not clickable on Android" group="troubleshooting">

Older Android browsers (pre-Chrome 90) sometimes have issues with the checkbox hack combined with `display: none/block` toggling.

**Fix**: The updated code already uses `max-height` transition instead of `display` toggle, which is more reliable on Android. If you're still seeing issues on older devices, add `position: relative` and `z-index: 1` to the `.menu li a` elements.

</Accordion>

## Testing your Carrd responsive navbar

<Notice type="success" title="Testing Tip">
Always test on real devices. Carrd's mobile preview in the editor doesn't catch all edge cases, especially iOS Safari quirks and Android touch behavior.
</Notice>

<ListCheck>
<ul>
  <li>Publish the site and test on a real phone (not just Carrd's mobile preview)</li>
  <li>Hamburger toggle opens AND closes the menu</li>
  <li>Each menu link closes the menu and navigates to the correct section</li>
  <li>Close button (X) closes the menu</li>
  <li>Resize desktop browser from 1920px down to 320px — verify the breakpoint at 768px</li>
  <li>Test with sticky header applied simultaneously (if using one)</li>
  <li>Test on iOS Safari, Chrome for Android, and desktop Chrome/Firefox</li>
  <li>Run a Lighthouse accessibility audit — check for ARIA warnings</li>
</ul>
</ListCheck>

## Frequently asked questions

<Accordion label="Do I need coding skills to add a mobile navbar to Carrd?" group="faq" expanded="true">
No. Method 2 (native Carrd elements) and Method 3 (plugins) require zero code. Method 1 (custom embed) requires copy-pasting HTML/CSS into Carrd's Embed element — no programming knowledge needed, just follow the steps.
</Accordion>

<Accordion label="What Carrd plan do I need for a responsive navbar?" group="faq">
It depends on the method:
- **Method 1** (custom code): Pro Standard at $19/year — you need the Embed element
- **Method 2** (native elements): Pro Plus at $49/year — you need Visibility settings
- **Method 3** (plugins): Pro Standard at $19/year + the plugin cost

All paid plans include a [7-day free trial](https://go.bitdoze.com/carrd) with no credit card required.
</Accordion>

<Accordion label="Can I use this navbar with a Carrd sticky header?" group="faq">
Yes, but it works best with Method 1 (custom code). The [sticky header tutorial for Carrd](https://www.bitdoze.com/add-stickey-header-carrd/) pairs directly with the custom code approach — you just need to adjust the `top` value in the dropdown CSS to match your header height. The native approach (Method 2) doesn't support sticky positioning without additional custom CSS.
</Accordion>

<Accordion label="What about sidebar menus for Carrd?" group="faq">
If a top navbar doesn't fit your design, a sidebar navigation menu is another option. It works better for sites with many sections or a dashboard-style layout. See [how to add a sidebar menu to Carrd](https://www.bitdoze.com/carrd-sidebar-menu/) for a step-by-step guide. You can also explore a [Carrd popup modal](https://www.bitdoze.com/carrd-popup-modal/) for overlay-style navigation.
</Accordion>

## More Carrd customizations

If you're building out your Carrd site beyond the navbar, these guides cover other common additions:

- [Add a Back to Top Button on Carrd](https://www.bitdoze.com/carrd-back-to-top-button/)
- [Add a Cookie Notice to Carrd](https://www.bitdoze.com/add-cookie-notice-carrd/)
- [Add a Pricing Table to Carrd](https://www.bitdoze.com/carrd-add-pricing-table/)
- [Add a Popup Modal to Carrd](https://www.bitdoze.com/carrd-popup-modal/)
- [Add Dark Mode Toggle to Carrd](https://www.bitdoze.com/carrd-dark-mode-toggle/)
- [Add a Testimonial Slider to Carrd](https://www.bitdoze.com/carrd-testimonial-slider/)
- [Add a WhatsApp Chat Button to Carrd](https://www.bitdoze.com/carrd-whatsapp-button/)
- [Add Countdown Timer Styling to Carrd](https://www.bitdoze.com/carrd-countdown-styling/)
- [Add a Custom Domain to Carrd](https://www.bitdoze.com/carrd-add-domain/)