Your website header is the first visual impression for visitors, typically featuring the event logo, dates, venue, and main navigation. Composer 2 allows you to create a fully customizable header with secondary menus, social media links, CTAs, search, and wishlist options. With seven header styles and full control over typography, colors, and layout, you can create on-brand navigation across desktop and mobile formats.
Key Features
Seven pre-designed header styles, selectable per page or for A/B testing
Optional sticky/fixed navigation that stays visible as users scroll
Flexible content: logos (large/small), menus, CTAs, icons, search, wishlist
Responsive variations: independent desktop default, sticky desktop, and mobile views
Customization controls:
Positioning: Static (above hero) or Absolute (overlay hero)
Backgrounds: colors, borders, transparency
Typography: font size, weight, color, hover/active states for menus
Menu & submenu styles: background, text, hover/active colors
Mobile menu overlay: styles and opacity
How to Use
Select and Edit Header Panel
Go to Back Office → Panels → Header.
Choose one of the seven header styles (homepage vs. subpages can differ).
Switch between Default, Fixed, and Mobile views to edit separately.
Configure Logo and Navigation
In Default view, upload logo images, add alt text, set logo size, and link to home.
Toggle navigation elements: main menu, social icons, CTAs, search, wishlist.
Adjust Appearance Settings
In the Settings tab, choose header positioning:
Static: sits above page content
Absolute: overlays the hero section
Set background colors, transparency, and borders for each header type.
Style Menus and Submenus
Customize menu fonts, sizes, boldness, colors, and hover/active styles
Adjust submenu backgrounds and text, including hover/active colors
Configure Sticky and Mobile Headers
Sticky header: toggle Default fixed and style like desktop header
Mobile header: upload a different logo if needed, toggle icons (social/CTAs), set background colors, and adjust menu overlay styles and opacity
Save and Preview
Click Save Panel after edits
Preview each header view: Default, Sticky, and Mobile
Composer 2 headers provide a flexible, branded navigation experience across all devices, enabling tailored layouts, responsive functionality, and visual consistency.
Watch the Video Demo:
Video Transcript:
The header on an event website will usually comprise of the show logo, dates and venue, and the main menu structure.
You can also add additional items such as a secondary navigation, social media icons and a CTA call to action.
There are 7 different styles of headers available in this Composer 2 platform.
In each of these you'll be able to customise the fonts and the colours.
We also have a sticky or fixed navigation.
This can be seen by scrolling down the page.
The sticky NAV is completely optional.
If you want to edit your header, please go into your back office.
The header section is set up in your panels, but please note if you want to edit the actual words of the menus and where they're linked to, this is held in the menu section.
Click on the Panel menu and then navigate to your header section.
As you can see here, you can set up multiple header types.
This can be useful if you would like to use it for testing purposes or if you need a different header on one page to the other.
For example, the Homepage header could have a very large logo, whereas the Subpage header could have a small logo.
Click into your panel to edit it.
In the header panel you will see there are three sections.
The first section is the default.
The default is the view that your desktop viewers will see.
Default fixed is what your desktop viewers will see if you set up the sticky or fixed header, and the mobile view is for mobiles and tablets.
To set up your default view, click on Default, choose the style you require and head down to the content section.
Please add the content you require for the logo.
Click on Edit, locate your logo and add some alternative text.
You can also adjust the size of it here.
Please don't forget to add a link to your logo as it is very useful when navigating back to the homepage.
The following tabs will allow you to toggle on and off these certain items, so you could turn off the main menu if you required.
The Social Network tab will allow you to edit your social media icons.
The Call to Action will allow you to edit any buttons you need to have in the top.
You can also turn on a search widget or a Wish list widget.
For more details on the actual widths, please refer to their videos.
Once you've set up the content, you can customise the way it looks by going to the Settings tab.
In the General tab you can set the width and position of the header.
The static will make your header appear above your hero.
Absolute will make your header appear on top of your hero.
If you choose static you can also set a colour for your background.
You can set different colours for the different sections as well.
So for example if you want to put a different colour on the navigation part you can.
You can also set borders.
This is recommended if your header is the same colour as the rest of your main body.
So for example you might have a white header and white body content.
The next tab will focus on how you can change the styles of the content so the dates and location can be set up.
Here the main menu is on the next tab.
This is where you can choose the fonts, the sizes, the boldness, the colours.
You can also set up the colour that the menu changes when hovered on and when active.
Below this you can set up the sub menus.
So you'll want to choose a background colour for the drop down and also some text colour.
Once again you can set up a hover colour and an active colour.
The final tab here will allow you to edit how the top menus will appear.
Once you are done with your desktop view you can, if you wish, add a sticky or fixed header.
This is optional.
The settings here are very similar to the ones for the default view.
Moving onwards to the mobile header, you can set up different things here.
So for example you may want to have a horizontal logo versus a portrait one on your desktop.
You may also want to hide certain items, so for example you may not want social media icons on here but you may want a call to action.
In the settings tab you control how it is going to look.
So for example you can change the position of the header to appear either over the top of your hero, sticky (i.e. fixed to the top), or above your hero.
You can change the colour of the background and the expanded header.
This is when you click on the menu icon and it opens up your menu.
I would suggest you fix this quite high as a low opacity will mean that the website will show behind your menu when open.
This can be a little bit confusing for people as they will see two sets of words.
For example, this is the mobile view I have at the moment.
I click on this, it opens up the expanded view.
If I had wording in the background I may want to make this a little darker.
In the next tab you can also set up how things are viewed, just as you could on the default view.
This includes your dates and location and the main menu.
By default the platform will set your menus into the centre of the screen.
You may prefer this to be at the top or the bottom.
All the settings are the same as on the default view.
Comments
0 comments
Please sign in to leave a comment.