How to Create a Carrd Mobile Responsive Navbar (3 Methods)

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 or try it free below.

Some Carrd tutorials

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

• Add a Sticky Header to Carrd makes the navbar stay visible on scroll
• Add a Floating Menu to Carrd is a different navigation pattern worth considering
• Add a Sidebar Menu to Carrd is an alternative layout for nav-heavy sites
• Add Smooth Scroll and Anchor Links to Carrd pairs directly with anchor-based nav links

What you’ll need

Which approach is right for you?

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

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.

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.

<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>

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 for a polished UX.

Accessibility notes

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.

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 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 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.

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 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 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 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 for tabbed content and the Carrd Accordion plugin for FAQ sections.

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

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.

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.

Troubleshooting common Carrd mobile navbar issues

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;
    });
  });
});

Testing your Carrd responsive navbar

Frequently asked questions

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
• Add a Cookie Notice to Carrd
• Add a Pricing Table to Carrd
• Add a Popup Modal to Carrd
• Add Dark Mode Toggle to Carrd
• Add a Testimonial Slider to Carrd
• Add a WhatsApp Chat Button to Carrd
• Add Countdown Timer Styling to Carrd
• Add a Custom Domain to Carrd