How to Use the Header Code Widget

The Header Code widget allows you to add custom code directly inside the visual header / main navigation bar of your website.

This means the code is rendered as part of the header layout itself, alongside other header widgets such as Logo, Menu, Buttons, Search, or Icons — not in the technical <head> section of the page.

It is mainly used for advanced, layout-related, or interactive customizations that need to live inside the header area.

What the Header Code Widget Is Used For

Use the Header Code widget when you want to:

Insert custom HTML elements inside the header layout
Add inline JavaScript that affects header behavior
Inject custom markup that cannot be built with standard widgets
Add small custom integrations or UI elements in the header
Extend header functionality beyond built-in widgets

Typical use cases include:

Custom badges, labels, or indicators in the header
Custom scripts related to navigation or header interactions
Embedding third-party widgets that must appear in the header
Conditional logic tied to user state (advanced use cases)
Experimental or highly customized header elements

Important: Where the Code Is Rendered

Code added via the Header Code widget:

Is rendered inside the visual header
Becomes part of the header’s layout and structure
Is displayed in one of the header columns (left, center, or right)
Is affected by header rows, spacing, alignment, and visibility
Appears on all pages where the header is active

⚠️ This widget does NOT inject code into the page <head>

For analytics, tracking, meta tags, or system-level scripts, use the appropriate global code settings instead: Web Studio > Webiste Settings > Custom code

Adding the Header Code Widget

To add custom code to the header:

Open Web Studio
Enable and edit the Header
Open the Add Widget panel
Select Code
Place the widget in the desired header column
Click Edit Code to open the code editor

Once added, the code becomes part of the global header layout.

Editing the Code

The editor allows you to insert:

HTML – custom markup or elements
Inline CSS – styles that affect the inserted content
Inline JavaScript – small scripts related to header behavior

The widget supports multi-line input and is intended for advanced use.

💡 Tip

Keep the code small, focused, and clearly commented — headers are performance-critical areas.

Common Header-Specific Use Cases

Custom UI Elements

Labels like “Beta”, “New”, or “Live”
Custom notification badges
Small interactive elements not available as widgets

Custom logic tied to menu interactions
Advanced hover or toggle behavior
User-state–based header elements (advanced)

Embedded Content

Third-party widgets designed to sit in navigation
Custom HTML blocks with icons, text, or links

Working With Header Rows & Layout

Because the Code widget behaves like other header widgets:

It respects the active header row (top, main, or bottom)
It aligns within left, center, or right columns
It inherits header spacing and padding rules
It appears in both normal and fixed (sticky) headers unless removed

💡 Tip

If you use a fixed header, test both the top header and the sticky version to ensure the code behaves correctly in both contexts.

Best Practices

Keep code minimal and purpose-driven
Avoid heavy scripts or large inline styles
Test thoroughly on desktop and mobile
Avoid code that blocks rendering or interaction
Comment your code for long-term maintainability

⚠️ Warning

Because the header is global, faulty code can break navigation, layout, or usability across the entire site.

When NOT to Use the Header Code Widget

Avoid using the Header Code widget if:

The code belongs in the technical <head>
The functionality can be built using standard widgets
The code is page-specific only
The script is large or performance-heavy

In those cases, a page-level Code widget or global system settings are better options.

Summary

The Header Code widget allows you to:

Add custom HTML, CSS, or JavaScript inside the visual header
Extend header layout and functionality
Build highly customized navigation experiences
Insert advanced or experimental header elements

Used thoughtfully, it gives advanced users powerful flexibility — while keeping the header structured, reusable, and consistent across the site.