BitDoze Logo
cms
Dragos

How to Create A Carrd.co Mobile Responsive Navbar

Learn how you can add a Responsive Navbar to your carrd website that has a mobile toggle.

How to Create A Carrd.co Mobile Responsive Navbar
#carrd

Table of Contents

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.

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:

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

  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 is working perfectly with this tutorial so you can use both.

Carrd Plugins and Themes

Related Posts