How to create a mobile responsive nav menu in Carrd

This is a technique to create a mobile responsive Carrd hamburger menu using only native features. No custom code required.

Carrd has loads of great features for a landing page builder, but one thing it doesn't have is a navigation menu that works responsively on both desktop and mobile. We used to have to hack one together using some custom code, but now there's a way to create a responsive navbar using just the available Carrd elements!

Follow steps #1 to #7:

Create Container on top of site. Set Type to Columns, and 30%:70% for column width.

Under Appearance, set Width of Container to Full Bleed.

2. For nav logo

Add an Image element to the left 30% column.

Width and Height set to 2.5, Alignment to Left.

Upload your site logo image to this element.

Add a Buttons element to the right 70% column of the Container. Click Add to create the requisite number of buttons to reflect the Section 'pages' for your Carrd site. In my case, I went with the typical About, Pricing and Contact.- Set each button's URL to their respective Section's anchor tag (e.g. About links to #about).

Set the Layout of this Buttons element to Row, Alignment to Right, and Settings > Visibility set to Desktop Only. This nav menu will now only show up on desktop screens.

4. For mobile-only nav hamburger icon

In the same right 70% column of the Container, add an Icon element, below the Buttons element stated in step #3 above.

Then for Icon settings, set Type to the Menu icon (the 3-lines hamburger icon), set the URL of the Icon to #menu, Alignment set to Right, Settings > Visibility set to Mobile Only. This nav menu icon will now only show up on mobile screens.

📌

If you need more complex navbars with multiple levels, check out Mega Nav Bar on Jason's Plugins For Carrd.

Below the Container element from step #1, add a Control element, Type set to Header Marker. This ensures your nav menu will always show up at the top of every 'page' (Section) of your Carrd site. Your nav header should look like this by the end of this step #5.

Create a new Section Break element, label it #menu.

Add a Container element below the Section Break element, Width to 20, Padding to 2, Border to #FFFFFF.

Add an Icon element into this Container. Set Type to Cancel (the cross icon), and URL to browser:back (this allows the user to go back to the previous page they were on). Under Appearance, set Icon element's Style to Solid, Shape to Circle, and Alignment to Right. Choose your preferred Icon and Background colors.

Below the Icon element, add a Buttons element to this Section. Click Add to create the requisite number of buttons to reflect the Section 'pages' for your Carrd site. In my case, I went with the typical About, Pricing and Contact. As this is the mobile menu, I also added a Home button to help the user go back to Home (#) page.

Set each button's URL to their respective Section's anchor tag (e.g. About links to #about).- Set the Layout of this Buttons element to Column, Alignment to Center. The mobile nav menu elements should look like this:

7. Publish, done!

You now got a respsonsive nav menu for your Carrd site that works on both desktop and mobile screens!

The upside of this solution is that everything is native to Carrd, so you can easily adjust the styles and colors. The downside is that this menu can only hold one level of navigation items. If you have multiple levels of nested nav items, you might have to look to a custom code solution like my Mega Nav Bar plugin.

For reference, you can download this as a free Carrd template to see how it's done.

Requirements: This template requires Pro Plus or higher due to its use of Advanced Settings.

Demo: mobilenavbar.carrd.co

Download: Free mobile navbar Carrd template here

📌

If you need more complex navbars with multiple levels, check out Mega Nav Bar on Jason's Plugins For Carrd.

You can also find more Carrd resources on our main site starrt.co.

More plugins from Jason