The Carrd plan does not support custom code
If the Embed element or custom code is not available, check that your Carrd plan supports it before debugging the navbar itself.
How to Add a Navbar to Carrd
Add a responsive Carrd navbar with an Embed element and custom code.
Carrd is excellent for simple pages, but a proper navigation menu often needs more than a row of buttons. A growing Carrd site may need sticky positioning, section links, a mobile menu, dropdowns, active link highlighting, and custom styling.
This guide explains the practical workflow for adding a Carrd navbar with generated embed code. You can use the Earlybyte Navbar Builder to create the code visually, or use the same steps with your own custom Carrd navbar code.
The same workflow works for Carrd landing pages, portfolios, product pages, SaaS pages, and simple service websites where visitors need a clear path to sections like features, pricing, examples, FAQ, and contact.
Before you start
- You need a Carrd plan that supports custom code and Embed elements.
- Decide where the navbar should sit in your Carrd layout.
- List the Carrd section IDs you want to link to, such as
#home,#pricing, or#contact. - Open the builder if you want to generate the navbar visually.
Step by step
-
1
Create your navigation structure
Add the top-level links your visitors need first. Keep the Carrd menu short, then use dropdowns only where they make the page easier to scan.
-
2
Add Carrd section links
Carrd section links usually point to hash targets. If your section is named
pricing, the navbar link should point to#pricing. -
3
Preview desktop and mobile
Check the desktop navbar, mobile menu, dropdown behavior, and active links before you paste the code into Carrd. This is where most layout problems are easiest to catch.
-
4
Copy the Carrd embed code
When the navbar looks right, copy the generated Carrd-ready embed snippet.
-
5
Add an Embed element in Carrd
Open your Carrd site, add an Embed element where the navigation should appear, and paste the generated code into it.
-
6
Publish and test
Publish the Carrd page and test it on desktop and mobile. Check section links, dropdowns, sticky behavior, and any external URLs.
A short final test is worth it: open the published Carrd site on a phone, tap every mobile menu item, scroll through each section, and confirm that the active link state follows the page.
Common mistakes
Most Carrd navbar issues are easier to catch before publishing. Preview the structure, check the mobile menu, and confirm each section target before copying the embed code into Carrd.
Links point to the wrong section IDs
A Carrd section link needs the right hash target. If a link should jump to the pricing section, confirm that the target is #pricing and that the section exists.
The navbar overlaps page content
Sticky or fixed navbars can sit above content. Add enough spacing at the top of the first Carrd section if needed.
The mobile menu is hidden
If the mobile menu opens behind other content, the issue is usually placement, stacking, or an overlapping Carrd container.
Common questions
A few practical answers for Carrd users who want better navigation without a heavier stack.
How do I add a navigation menu in Carrd?
Create or generate the navbar code, add a Carrd Embed element, paste the code into it, publish the page, and test the desktop and mobile menu.
Can I make a Carrd navbar sticky?
Yes. The builder supports sticky or fixed navbar behavior so the navigation can stay available while visitors scroll.
Can a Carrd navbar link to sections?
Yes. Carrd section navigation uses hash targets such as #pricing or #contact, and the builder can generate those links for you.