A reference for overriding the default NavigateMe styles using navigateme_custom_theme.css.

Setup

Place both files in the same folder:

your-project/
├── navigateme.min.js
└── navigateme_custom_theme.css

Then import the theme CSS before the NavigateMe script in your HTML <head>:

<!-- 1. Your custom theme -->
<link rel="stylesheet" href="navigateme_custom_theme.css" />

<!-- 2. NavigateMe script -->
<script src="navigateme.min.js" defer></script>

Order matters. Loading the theme first ensures NavigateMe's internal styles can still override at runtime if needed, while your file remains the base layer.

How Overrides Work

The theme file is a set of empty rule blocks — one per UI component. To customise a component, find its block and add your CSS properties inside it. You only need to fill in the blocks you want to change; everything else falls back to NavigateMe's defaults.

/* Example — change the launcher button colour */
#__sf_launcher {
  background: #0f172a;
  bottom: 32px;
  right: 32px;
}

Component Reference

Launcher Button

Selector What it controls
#__sf_launcher Position, background, border-radius, shadow
#__sf_launcher .sf-l-icon Icon size and spacing
Selector What it controls
#__sf_menu Panel width, background, border, shadow
.sf-menu-hdr "Tours" header font and spacing
.sf-menu-item Row padding, hover state
.sf-menu-item.sf-active Active/running guide highlight
.sf-mi-dot Colour indicator dot
.sf-mi-label Item label typography
.sf-restart-btn Restart CTA button

Spotlight Ring & Tooltip

Selector What it controls
#__sf_ring Cutout shape, backdrop darkness (viabox-shadow)
#__sf_tooltip Tooltip bubble background, radius, shadow
.sf-tt-title Tooltip heading text
.sf-tt-body Tooltip body text
.sf-pulse Pulsing outline on the highlighted element
.__sf_hl_part Border colour and width of the highlight

Message Toast

Selector What it controls
#__sf_msg Card background, border, radius, shadow
#__sf_msg.show Entry animation (opacity / transform)
#__sf_msg.fallback Centred pill variant (no anchor)
.sf-msg-body Inner padding and gap
.sf-msg-tag Badge label (e.g. "Flow Assist")
.sf-msg-text Message body typography
.sf-step Step counter label
.sf-msg-footer Footer bar (tour mode)
.sf-pip/.sf-pip.active Progress pip dots
.sf-exit-btn × close button on the card

Tour Navigation

Selector What it controls
.sf-tour-nav Prev/Next button row layout
.sf-nav-btn Shared button base styles
.sf-next-btn Next button colour
.sf-prev-btn Previous button colour

Splash / Onboarding

Selector What it controls
#__sf_overlay Fullscreen background colour
#__sf_shell Content container width and padding
#__sf_prog_track Progress bar track
#__sf_prog_fill Progress bar fill (brand colour)
#__sf_skip Skip button (top-right)
.sf-step-tag Step tag label above the headline
.sf-headline Main serif headline
.sf-subtitle Subtitle paragraph
.sf-tiles Tile grid layout
.sf-tile Individual tile card
.sf-tile.sf-sel Selected tile state
.sf-tile .sf-ico Tile emoji/icon
.sf-tile .sf-lbl Tile label text
.sf-btn-row Button row layout
.sf-cta Primary CTA button (Continue / Finish)
.sf-back Secondary back button
.sf-shake Shake animation on validation error

Survey Sheet

Selector What it controls
#__sf_overlay.sf-survey-mode Survey backdrop overlay
.sf-survey-sheet Sheet container (size, radius, shadow)
.sf-survey-head Header area padding and border
.sf-survey-head-row Header flex row (title + cancel)
.sf-survey-progress Progress bar track
.sf-survey-bar Progress bar fill
.sf-survey-step-count "Step X of Y" label
.sf-survey-head h2 Question title
.sf-survey-cancel × cancel button
.sf-survey-body Body padding and scroll
.sf-survey-stars Star rating row
.sf-survey-star Individual star size and hover
.sf-survey-scale Low/High scale labels
.sf-survey-numbers NPS number grid
.sf-survey-num NPS number cell
.sf-survey-num.sel Selected NPS number
#sf-survey-review Review textarea
.sf-survey-char-count Character counter
.sf-survey-feedback Inline feedback label
.sf-survey-footer Footer bar layout
.sf-survey-footer-left Footer hint text
.sf-survey-footer-buttons Footer button group
#sf-survey-next Primary Next / Submit button
#sf-survey-back Back button
.sf-survey-thankyou Thank-you screen wrapper
.sf-survey-thankyou-icon Thank-you icon circle
.sf-survey-thankyou h3 Thank-you heading
.sf-survey-thankyou p Thank-you body text
.sf-survey-done-btn Done / Close button

Tips