Flux Product Docs
  • What is Flux?
  • Guides
    • Creating a Premium Video
    • Creating Your First Site
    • Creating a Countdown
    • Creating a Navigation Bar
    • Creating a Group
    • Custom 404 Page
    • Adding a Favicon to Your Site
    • Adding Videos to Your Site
    • Managing Your Guest List
    • Asset Management
    • Creating Sites from Site Templates
    • Publishing Site Versions
    • Advanced Debugging
  • Fundamentals
    • Key Concepts
    • Sites
    • Guests
    • Environments
      • Show Variables
    • Flows
      • Anatomy of a Node
      • Connecting Nodes and Building Flows
      • Passing Data
      • Scope
      • Interpolation
    • Keyboard Shortcuts
      • Keyboard Shortcuts - Page Editor
    • Animation States
    • Local Variables
    • Groups
  • Use Cases
    • For Designers
    • For Engineers
      • Custom CSS
      • Custom Modules
    • For Event Manager
      • Intercom Integration
  • Documentation
    • FAQ
    • Glossary
    • 🚀Show Controller
      • Modes
    • Domains and Subdomains
      • Hover
      • AWS Route 53
    • Premium Live Channels
    • Basic Video
    • Premium Video
      • AI Generated Subtitles
      • Supported Input Codecs and Containers
      • Supported Language Labels
      • Serverside Forensic Watermarking
    • Flow Nodes
      • Middleware
  • Modules
    • Access Code
    • Audio
    • Button
    • Carousel
    • Chat
    • Checkbox
    • Container
    • Countdown
    • Date
    • Embed
    • Image
    • Intercom
    • Link
    • Lottie
    • Page
    • Meter
    • Modal
    • Photobooth Gallery
    • Open Login
    • QR Code
    • Radio
    • Rich Text
    • Stack
    • Style
    • Spline
    • Switch
    • Text Input
    • Video
  • Template Guides
    • NatGeo FYC
      • Adding a Panel
    • Meow Wolf All Shrimps
  • 🚀Change Logs
    • July 12, 2024
    • June 08, 2024
    • April 26, 2024
    • April 12, 2024
    • March 29, 2024
    • March 15, 2024
    • March 1, 2024
    • September 2022
    • August 2022
    • July 2022
    • June 2022
Powered by GitBook
On this page
  • Creating Layout for our Navigation Element
  • Add Logo to Navigation bar
  • Creating Botton in Navigation Bar

Was this helpful?

  1. Guides

Creating a Navigation Bar

Last updated 2 years ago

Was this helpful?

Creating Layout for our Navigation Element

Starting on our Home Page we'll first need to drag out a stacked layout in to our editor. In the properties panel

  1. Set orientation to Horizontal (This is the direction we want our elements to layout)

  2. set padding to 20px in all directions (To give some space around our navigation elements)

  3. Set a height to 75px ( This is how tall we want our navigation bar)

  4. Set Background color to white

Add Logo to Navigation bar

Next lets drag in an Image module inside the stacked layout. Make sure the properties button is selected in Properties Panel.

In the Properties Panel, Select an image/logo asset that you have uploaded to the asset manager.

Next in the Object Fit field set to `contain` so that the image doesn't go past the navigation bar and give it a max height of 100%.

Creating Botton in Navigation Bar

To create clickable buttons that can redirect your users to other pages or sites, drag in an other stacked layout into our navigational bar. Set the orientation to Horizontal and set Columns in Gap Sizing to 10px. This will put a 10px gap between all elements within this stacked layout.

Next we will grab two `Button` modules and drag them into the stacked layout. In the Properties Panel we can give them names and in the styling tab, change the background color to white.

In the Button Properties, you'll be able to add a URL link and you'll see a check box that will allow the link to be opened on same page or new tab when clicked.