Changing Navigation Layout and Style

Framekit offers different navigation layouts to match your site's design. Here's how to choose and customize them.

Accessing Layout Settings

In the editor, look at the header bar

Click the Settings button (gear icon)

Look for Layout or navigation options

Or access via the layout menu in the editor toolbar

Navigation Types

Sidebar Navigation

A vertical navigation on the left side of your site.

Best for:

• Portfolio sites
• Personal sites
• Creative projects
• Sites with fewer pages

Characteristics:

• Logo and title on the left
• Vertical page list
• Full page width for content

Top Navigation

A horizontal navigation bar at the top of your site.

Best for:

• Business sites
• E-commerce
• Multi-page sites
• Professional portfolios

Characteristics:

• Logo on the left
• Page tabs in the center
• CTA buttons on the right

Top Navigation Styles

When using top navigation, you can choose from three styles:

Regular

• Clean, straightforward horizontal bar
• Full-width with subtle border
• Pages listed as tabs
• Professional and versatile

Regular v2

• Similar to Regular
• Slightly different padding
• More centered content
• Good for minimalist designs

Rounded

• Navigation bar has rounded corners
• Floats slightly from the edges
• Modern, app-like appearance
• Great for creative sites

Sticky Navigation

Control whether navigation stays visible when scrolling:

Sticky ON (Default)

• Navigation stays at the top when scrolling
• Always accessible for visitors
• Best for user experience

Sticky OFF

• Navigation scrolls away with the page
• More content visible
• Cleaner full-page sections

To toggle:

Go to layout settings

Find "Sticky navigation" toggle

Turn on/off as needed

Site Width (Padding)

Control how much padding surrounds your content:

Find "Site width" slider in layout settings

Drag to adjust:

• Lower values = More padding, narrower content
• Higher values = Less padding, wider content

This affects all pages consistently.

Choosing the Right Layout

Use Sidebar When:

• Your site has 3-5 pages
• You want a unique, creative feel
• Content should be the main focus
• You prefer vertical navigation

Use Top Navigation When:

• Your site has many pages
• You need CTA buttons visible
• Users expect traditional navigation
• Dropdowns might be needed for sub-pages

Use Rounded Style When:

• You want a modern, floating look
• Your brand is playful or creative
• The site has a light, airy design

Use Regular Style When:

• You want professional appearance
• Classic business look is needed
• Maximum content width matters