Who This Is For / When to Use
This article is for users building websites or funnels in Kyrios who want to:
Create anchor links on the same page
Scroll users to a specific section
Link buttons or menus to sections on another page
Improve navigation without writing custom code
What a Custom CSS Selector Is
A Custom CSS Selector is an automatically generated ID assigned to every section or element in the Kyrios Site Builder.
It always starts with
#It uniquely identifies one section or element
It can be used in links, buttons, menus, or URLs to scroll to that location
Each selector is unique and should only be used for one element.
How to Find a Custom CSS Selector
Step 1: Open the Website Builder
Go to Sites
Open Websites
Click Edit on the website you want to modify
Step 2: Select the Section or Element
Click directly on the section or element you want to anchor to
Confirm it is highlighted with a green outline
This ensures you are editing the correct item.
Step 3: Copy the CSS Selector
In the right-hand settings panel, open the Styles tab
Scroll to the CSS Selector field
Click the copy icon to copy the selector (example:
#section-ykM1T3jOQ)
This selector is now ready to be used in links or buttons.
Anchoring or Scrolling on the Same Page
To scroll to a section on the same page:
Copy the CSS Selector of the target section
Paste it directly into:
A button link
A menu item link
A text hyperlink
Example:
#section-ykM1T3jOQ
When clicked, the page will scroll to that section automatically.
Anchoring or Scrolling to a Different Page
To scroll to a section on a different page:
Copy the full page URL
Append the CSS Selector to the end of the URL
Example:
https://www.yoursite.com/pricing#section-ykM1T3jOQ
This works for:
Websites
Funnels
Custom domains
Subdomains
Common Use Cases
Custom CSS Selectors are commonly used for:
Navigation menus that scroll to page sections
“Book a Call” buttons linking to a calendar section
Pricing table links
Table of contents navigation
Terms of Service or policy links
Multiple buttons pointing to the same opt-in form
Direct links to videos or embeds
Common Issues and Fixes
Link Does Not Scroll
Confirm the selector starts with
#Confirm the selector was copied from the correct section
Ensure the section is visible on that device (desktop/mobile)
Scroll Works on Desktop but Not Mobile
Check Visibility settings for the section
Make sure the section is enabled for mobile view
Wrong Section Scrolls
Each section has a unique selector
Re-copy the selector from the correct section
Do not reuse selectors across elements
FAQ
What is a Custom CSS Selector?
A Custom CSS Selector is a unique ID automatically assigned to a section or element in the Kyrios Site Builder. It allows links and buttons to scroll to that exact location.
Where do I find the CSS Selector?
Select the section or element, open the Styles tab in the right-hand panel, and copy the value shown in the CSS Selector field.
Can I use the same selector for multiple sections?
No. Each selector is unique to one section or element. Reusing a selector will cause incorrect or unpredictable scrolling behavior.
Can I link to a section on another page?
Yes. Use the full page URL followed by the CSS Selector:
https://www.yoursite.com/page#CSS_SELECTOR
Does this work across domains or subdomains?
Yes. As long as the URL and selector are correct, scrolling works across domains and subdomains hosted in Kyrios.