When you select any block or element from the layout tree, you'll see a "Whole Element" dropdown at the top:
When Whole Element is selected, any style change you make will be reflected on the whole block or element. But in some cases, you may want to drill down into that block or element and design a specific area. Those areas include, but are not limited to:
- Links in a Text Element
- Specific sections of a Venue, Date & Time, or Countdown Element
- Items in a Navigation Element
You can drill into a block or element by using a custom selector. Custom selectors are available in the Whole Element dropdown. Most of the elements we listed above come equipped with custom selectors but you also have the ability to create your own. At the bottom of the dropdown, you'll see an option for custom selector:
You can use the DIY (do it yourself) custom selector to target even more areas of a block or element. Here are some popular ways we've seen custom selectors used:
- Editing the hamburger icon on mobile
To adjust the size of the hamburger menu on your Navigation Bar, you'll need to add a new custom selector. Open your Splash window next to this article to follow along.
Start by copying the string below - you'll need it later.
Next, follow these steps:
1. Open the Event Page touchpoint.
2. Toggle to mobile view.
3. Open the Navigation block.
4. Open the Links element.
5. Click on Whole Element Dropdown.
6. Select Add Custom Selector.
7. In the pop up window, you'll see two fields. In the first field, enter a descriptive name for the custom selector (e.g. mobile nav). In the second field, paste the string from above.
8. Click Add.
9. Keep the Links element open and open the Font tab. Increase or decrease the font size to adjust the menu display.
To change the placement of the hamburger menu, open the Positioning tab and select whether the menu should appear on the left or right side of the screen.