In this tutorial, we want to hide a desktop navigation group and show a mobile menu icon when the page width is below a certain breakpoint (e.g., 768 pixels).

Setup:

1. Build your desktop navigation using a Group. Place links, buttons, etc., inside it. Name this group Group Desktop Navigation.
2. Place a Button or Icon element (this will be your menu toggle icon) somewhere appropriate, maybe near the top-right. Name this Button Mobile Menu Icon.
3. In the Group Desktop Navigation's property editor, under Layout, keep "This element is visible on page load" checked (or uncheck, depending on if you design mobile-first or desktop-first, but let's assume desktop-first for this example).
4. In the Button Mobile Menu Icon's property editor, under Layout, uncheck the box "This element is visible on page load." We want it hidden initially.

You'd typically add a workflow to the Button Mobile Menu Icon to show the actual mobile menu when clicked, but this tutorial focuses just on the icon's visibility

Add the conditional logic:

1. For the group desktop navigation (the one we want to hide on small screens):

   • Select Group Desktop Navigation.

   • Go to the Conditional tab.

   • Click Define another condition.

   • Click where it says "Click here to define a condition".

   • Select Current Page width.

   • Select the operator: < (less than).

   • Enter the value: 768 (or your chosen breakpoint).

     • Condition: Current Page width < 768

   • Click where it says "Click here to define another property."

   • Select This element is visible.

   • Set the value to no.

     • Rule: When Current Page width < 768 Then This element is visible is "no"

2. For the button mobile menu icon (the one we want to show on small screens):

   • Select Button Mobile Menu Icon.

   • Go to the Conditional tab.

   • Click Define another condition.

   • Click where it says "Click here to define a condition".

   • Select Current Page width.

   • Select the operator: <.

   • Enter the value: 768.

     • Condition: Current Page width < 768

   • Click where it says "Click here to define another property."

   • Select This element is visible.

   • Set the value to yes.

     • Rule: When Current Page width < 768 Then This element is visible is "yes"

Testing

Preview your page. If your browser window is wide (wider than 768px), you should see the desktop navigation and not the mobile icon.

Slowly resize your browser window horizontally, making it narrower.

When the width drops below 768px, the desktop navigation group should disappear, and the mobile menu icon should appear.

Resize it wider again, and they should switch back.

ABOUT ME

I'm Juliet Edjere, a no-code professional focused on automation, product development, and building scalable solutions with no coding knowledge.

I document all things MVP validation and how designs, data, and market trends connect.

Click. Build. Launch.

Visit my website → built with Carrd and designed in Figma