How to customize your Pancake Navigation with CSS recipes

Last updated on Feb 17, 2023

In this article, we will show you how to customize your Pancake Navigation with CSS recipes to create a unique and visually appealing navigation for your tour.

Let's dive in!

1. Go to the Navigation settings.

2. Press Add all links or Add active pano to add the pancake navigation.

3. After the pancakes are added, go to the Styles section.

4. Enter the CSS code that you wish to utilize.

In the example below you can apply a beat effect to the pancakes. Copy and paste the code below:

#overlay div.arrow.clickable > sh-icon > svg {

filter: drop-shadow(0px 2px 2px rgb(0 0 0 / 0.8));

animation: beat 0.8s ease-in-out infinite alternate;

#animation: spin 2s linear infinite;

}

5. Now you have the Pancake Navigation with a beat effect that is both cool and appealing.

Check this sample tour!