Introduction
Your website header is the central hub for navigation and calls-to-action. A clear, well-designed header helps visitors find content quickly, improves usability, and enhances the overall look of your site.
With the Swiftwebsites.ai builder, you can easily customize your header layout, menus, and style, no coding required. This guide walks you through how to add elements, create submenus and mega menus, adjust layouts, and enable sticky or hidden headers for a tailored user experience.
Why Headers Are Important
Headers are the primary navigation area for your website.
A clean header with a logo, clear menu, and strong call-to-action directs visitors to the right content.
Every template starts with a different header design, but you can modify it completely.
Building Your Header Layout
Headers are structured in rows. You can add rows on top or bottom using the “+” icon.
Drag and drop elements (logo, navigation menu, social media buttons, CTA buttons) into rows.
Use blue alignment lines to place items precisely.
Delete any unnecessary text or widgets to keep the header clean.
Adding Widgets to Your Header
From the header row, click the “+” icon to insert widgets
such as:
Social media icons
Shopping cart icon
Search bar
Use the handles to adjust spacing, margins, and padding between elements.
Creating and Editing Menus
Click Edit Menu to manage your navigation.
Add menu items that can link to:
Pages
Store products
Anchor points
Pop-ups
Emails or phone numbers
Create submenus by dragging an item slightly to the right under a parent menu item.
To remove a submenu, drag it back to the left.
Mega Menus
Add a mega menu for enhanced dropdowns.
Click the “+” icon next to a menu item (e.g., Contact) and choose Mega Menu.
Edit the mega menu area:
Add product listings
Insert galleries or videos
Create custom blocks with drag-and-drop
Confirm and save to display a large, multimedia dropdown.
Adjusting Layouts and Styles
Open Header Settings to adjust:
Background color
Margins and padding
Layout type:
Full width (stretched edge to edge)
Compact (contained view)
Vertical (left or right sidebar)
Overlay Headers
Enable Header on Top of Content to place your header over background images.
Use a transparent background with white text/logo for contrast.
Great for landing pages or hero sections with strong imagery.
Sticky and Fixed Headers
Enable Fixed Header to keep navigation visible when scrolling.
Create a compact fixed header with fewer items to maximize screen space.
Customize the fixed header separately from your main header.
Hide or Show Headers and Footers
Use the Hide option to remove headers or footers from specific pages (e.g., landing pages or funnels).
Toggle back to Show if you want them visible again.
This allows distraction-free designs where navigation is not needed.
Best Practices
Keep navigation simple and uncluttered, focus on key links.
Use submenus or mega menus for organized, content-rich navigation.
Always preview your header on both desktop and mobile before publishing.
Consider transparent overlay headers for visual impact on landing pages.
Use sticky headers sparingly. Compact versions work best on scroll.
Hide headers/footers on funnel or conversion pages to reduce distractions.
Quick Workflow Summary
Open Header Editor in your builder.
Add or remove rows and widgets.
Build and edit menus, submenus, or mega menus.
Adjust layout style (full-width, compact, vertical).
Enable overlay or sticky headers if needed.
Hide/show headers or footers for specific pages.
Preview on all devices and Save/Publish.