Using Named Containers for Targeted Queries

We can extend the idea of coordinating visibility by using multiple named containers for maximum flexibility.

Implementing a product site navigation using named containers

A product site navigation is an excellent component for demonstrating this concept. We’ll define two containers and use the second container property of container-name to be more explicit about attaching query styles.

The outer elements will be a container named “navigation.” And the page navigation list area will be a container named “menu.”

This will enable us to switch the navigation list to a button that will trigger a drop-down on a reduced width, based on the menu container. And on our narrowest width, we’ll reduce the company brand to just the logomark.