How to Create A Carrd.co Mobile Responsive Navbar

Dragos
February 14, 2024
- Cms

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

Carrd.co

Some Carrd Tutorials:

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

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.

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:

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

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

Adjust the color variables in the :root selector to match your Carrd theme.
Modify the menu items in the <ul class="menu"> to reflect your site’s structure.
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 is working perfectly with this tutorial so you can use both.

Carrd Plugins and Themes