---
title: "How to Create A Carrd.co Mobile Responsive Navbar"
description: "Learn how you can add a Responsive Navbar to your carrd website that has a mobile toggle."
date: 2024-02-14
categories: ["cms"]
tags: ["carrd"]
---

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

[Carrd.co](https://try.carrd.co/bitdoze) is a platform that allows you to create simple, responsive, and beautiful websites with just a few clicks. You can choose from a variety of templates, customize them with your own content, and publish them online for free or with a premium plan.

One of the features that Carrd.co offers is the ability to create a header for your website, which is the top section that usually contains your logo, navigation menu, and other elements. A header can help your visitors navigate your website and access the most important information.

However, creating a header that looks good on both desktop and mobile devices can be challenging, especially if you want to have a hamburger menu, which is a common design pattern for responsive websites. A hamburger menu is a button that consists of three horizontal lines, and when clicked, it reveals a hidden menu with more options.

In this article, we will show you how to create a responsive header with a mobile navbar in Carrd.co using an embed widget and custom code option.

<Button link="https://try.carrd.co/bitdoze" text="Carrd.co" />

<YouTubeEmbed
  url="https://www.youtube.com/embed/PkZ7CYfKxSg"
  label="How to Create A Carrd.co Mobile Responsive Navbar"
/>

Some Carrd Tutorials:

- [Add Stickey Header Carrd](https://www.bitdoze.com/add-stickey-header-carrd/)
- [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/)
- [Back To Top Button on Carrd](https://www.bitdoze.com/carrd-back-to-top-button/)

> The responsive navigation menu will need **Pro Standard** plan as we are going to use a simple HTML and CSS code for this.

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

## 1. Create a Container

The header that will have the navigation menu will need to be inserted in a container, so you will need to add a container with 2 columns for this. In the first column, you will add you logo and in the second column, you will add the embed code.

You can split them as 25% - 75% and choose what background you want for your header, this will not impact the responsive nav bar. Check the video where I go in detail.

## 2. Add an Embed Widget

In the second column of the container, you will need to add the embed widget that will hold the code. You just assign a name.

## 3. Add the HTML/CSS code

Below is the code that we are going to use to create the responsive navbar and menu items:

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

  /* Basic Reset and Body Styling */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Navigation Styling */
  nav {
    color: var(--secondary-color);
    padding: 15px;
    display: flex;
    align-items: center; /* Changed: Align items to the center vertically */
    justify-content: flex-end; /* Changed: Align items to the start (left) */
    align-content: flex-end; /* Not strictly necessary for this change */
    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 {
    /* Target a pseudo-element for the underline */
    content: "";
    position: absolute;
    bottom: 2px; /* Distance from the text */
    left: 50%; /* Center the underline */
    width: 0; /* Initial width is 0 */
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease-in-out; /* Control the transition effect */
  }

  .menu li a:hover::after {
    width: 100%; /* Expand to full width on hover */
    left: 0; /* Start the underline from the left */
  }

  /* Hover effect for submenu items */
  /* 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 {
    display: none;
  }

  /* Responsive - Media Queries (For Mobile) */
  @media (max-width: 768px) {
    /* Show the Hamburger */
    .hamburger {
      display: block;
    }

    /* Hide and Modify Menu on Mobile */
    .menu {
      position: absolute;
      width: 100%;
      top: calc(15px + 6em);
      left: 0;
      background-color: var(--primary-color);
      text-align: center;
      padding: 40px 0 0 0;
      display: none;
      z-index: 999;
    }

    .menu li {
      width: 100%;
    }

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

    #menu-toggle:checked ~ .menu {
      display: block;
    }
    .close-button {
      display: block;
      position: absolute;
      top: 20px;
      right: 30px;
      background: none;
      border: none;
      font-size: 18px;
      color: var(--secondary-color);
      cursor: pointer;
    }
  }
</style>

<nav>
  <input type="checkbox" id="menu-toggle" />
  <label for="menu-toggle" class="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </label>
  <ul class="menu">
    <button class="close-button">X</button>
    <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>
</nav>
<script>
  document
    .querySelector(".close-button")
    .addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });
  document
    .querySelector(".close-button")
    .addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });

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

**Code Explanation**

- The `:root` selector defines CSS variables for font, colors, and base font size. These variables make it easy to customize the appearance of the navbar.
  - `--mbm-main-font`: Inherits the font from the main Carrd theme.
  - `--mbm-font-size-base`: Sets the base font size for the menu items.
  - `--primary-color`: Defines the color for the mobile menu background.
  - `--secondary-color`: Sets the color for text and icons.

- The `nav` element is styled to align items to the center vertically and to the right horizontally, creating a clean and modern look.

- The `.menu` class styles the list of navigation items, displaying them in a row on desktop.

- Each menu item (`<a>` inside `<li>`) has a hover effect that creates an underline animation when hovered over.

- The hamburger menu (`.hamburger`) is hidden by default and only appears on mobile screens.

- Media queries for screens smaller than 768px wide:
  - The hamburger menu becomes visible.
  - The menu items stack vertically and are hidden by default.
  - A checkbox (`#menu-toggle`) is used to toggle the mobile menu's visibility.
  - A close button is added to the mobile menu for better user experience.

- The `<nav>` element contains the menu structure:
  ```html
  <ul class="menu">
    <button class="close-button">X</button>
    <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>
  ```
  You can modify the `href` attributes and text content to match your Carrd sections.

- The JavaScript at the end adds functionality to close the mobile menu when the close button is clicked or when a menu item is selected.

To customize the navbar:
1. Adjust the color variables in the `:root` selector to match your Carrd theme.
2. Modify the menu items in the `<ul class="menu">` to reflect your site's structure.
3. If needed, adjust the `--mbm-font-size-base` to change the text size of menu items.

This responsive navbar provides a sleek design for desktop views and a user-friendly mobile menu, enhancing navigation across all device sizes.

The tutorial made on how you can [add a sticky header to carrd](https://www.bitdoze.com/add-stickey-header-carrd/) is working perfectly with this tutorial so you can use both.

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