Navigation & Theme Customisation
Overview
Customise your microsite's appearance and navigation to match your brand. Control colours, fonts, navigation links, and overall styling to create a cohesive brand experience.
Navigation Settings
Navigation Bar
Display Options
Show Navbar: Toggle navigation bar on/off
Navbar Style: Choose from:
Transparent: See-through with backdrop blur
Solid: Solid background colour
Gradient: Gradient background
Navigation Links
Custom Links: Add navigation links
Link Labels: Customise link text
Link Destinations: Internal (#section) or external URLs
External Links: Mark links as external (opens in new tab)
Navigation Logo
Custom Logo: Upload custom navbar logo
Logo Size: Automatically sized
Logo Position: Left side of navbar
Call-to-Action Button
CTA Text: Button label (e.g., "Contact Us", "Book Now")
CTA Link: Button destination
CTA Style: Matches theme button style
Footer
Display Options
Show Footer: Toggle footer on/off
Footer Text: Custom footer text
Footer Links: Add footer navigation links
Show "Powered By": Toggle Tourism Accelerator attribution
Theme Settings
Colours
Primary Colour
Brand Colour: Your main brand colour
Usage: Buttons, links, accents, badges
Format: Hex code (e.g., #1e40af)
Secondary Colour
Accent Colour: Secondary brand colour
Usage: Highlights, secondary elements
Format: Hex code
Background Colours
Background: Main background colour
Footer Colour: Footer background colour
Format: Hex code or colour name
Typography
Font Families
Body Font: Main text font
Heading Font: Headings font
Options: System fonts or web fonts
Styling
Border Radius
Options: None, Small, Medium, Large, Full
Affects: Buttons, cards, images
Recommended: Medium for balanced look
Button Style
Options: Solid, Outline, Ghost
Solid: Filled with background colour
Outline: Border with transparent fill
Ghost: Transparent with hover effect
Best Practices
Colour Selection
Brand Consistency: Use your brand colours
Contrast: Ensure text is readable
Accessibility: Meet WCAG contrast guidelines
Limited Palette: Stick to 2-3 main colours
Navigation
Keep it Simple: 3-5 main links maximum
Clear Labels: Use descriptive link text
Logical Order: Most important links first
Mobile Friendly: Test on mobile devices
Typography
Readability: Choose readable fonts
Hierarchy: Use different sizes for headings
Consistency: Use same fonts throughout
Web Safe: Prefer web-safe or web fonts
Configuration Steps
Setting Up Navigation
Enable Navbar
Go to Microsite Settings
Enable "Show Navbar"
Choose navbar style
Add Navigation Links
Click "Add Link"
Enter link label
Set destination (internal or external)
Mark as external if needed
Configure Footer
Enable footer if desired
Add footer text
Add footer links
Toggle "Powered By" attribution
Setting Up Theme
Choose Primary Colour
Enter hex code or use colour picker
Preview changes in real-time
Ensure good contrast
Set Typography
Choose body font
Choose heading font
Preview text appearance
Configure Styling
Set border radius
Choose button style
Preview changes
Troubleshooting
Navigation not showing?
Ensure "Show Navbar" is enabled
Check navigation settings are saved
Refresh the page
Colours not applying?
Verify colour codes are valid hex format
Check for CSS conflicts
Clear browser cache
Links not working?
Verify link URLs are correct
Check internal links use #section format
Ensure external links include https://
Theme not updating?
Save theme settings
Clear browser cache
Check for conflicting styles
Advanced Customization
Custom CSS
Some themes support custom CSS
Use sparingly to avoid conflicts
Test thoroughly before publishing
Responsive Design
Navigation adapts to mobile automatically
Test on multiple screen sizes
Ensure touch targets are adequate
Brand Consistency
Match your main website
Use consistent colours and fonts
Maintain brand guidelines