Confused on the logic behind combinations of variants

[anthony_schanen]

I am trying to create a mobile menu for my app, but I’m not understanding the logic behind making variants when different elements need to be displayed.

Here is my Navbar, with one mobile screen variant:

From what I’ve ascertained from the documentation, if I want another element to appear as a result of pressing my hamburger menu, I would need another variant (toggle I think).

When I try to create another toggle variant, that variant is created based on the base variant, not the smaller screen sized screen variant.

This just leads me to believe I have done something wrong, or I am approaching this wrong.

So I have a “Combo” of variants. When the screen size is less than 930 and the mobile menu is pressed I need a menu to be displayed.

I referred to the documentation here but I’m not following the art board mentioned there.

What steps do I need to follow to do this?

[sarah_ahmed]

Hello @anthony_schanen,

The screenshots in the variant documentation currently show an outdated version of the UI. Thank you for pointing this out. I’ve added a task to update the variant docs and include more information about variant combinations.

As for your question, you can find the combinations section at the bottom of the canvas. Click the plus button in the gray box next to Combinations, and you should be able to create an artboard that combines the Mobile only and toggleVariant variants.