Header styles

Broadcast includes multiple header styles to easily customize the look of your main header

Logo above menu

This style places the brand logo in the middle and navigation below. The design allows for a longer navigation as the entire header space is available to the navigation menu. Social icons are also placed at the top left. Account, search and cart are placed on the right side:

Icon style: Text

Icons

Broadcast includes several icon options with varying styles coupled by sizes. These examples demonstrate the account, search and cart icons using different combinations:

Clean icon style uses softer notes and a classic basket for the cart icon:

Icon style: Clean

Modern icon style brings some darker elements to the icons and a different cart style:

Icon style: Modern

Bold icon style is an even darker with solid elements:

Icon style: Bold

Social icons are optional and are based on the links you choose to setup in the Theme settings -> Social media. Large icons can be used with all icon styles:

Icon style: Clean
Icon style: Modern
Icon style: Bold

Logo beside menu

This style places the brand logo to the left with the navigation in the center. The design is a more compressed header area. Ideal for smaller/shorter navigation menus:

Icon style: Text

Icons

Examples of icons when used with Logo beside menu style and sized Small:

Icon style: Clean
Icon style: Modern
Icon style: Bold

Setting the icon size is set to Large can be helpful to balance whitespace and draw attention to the icons:

Icon style: Clean
Icon style: Modern
Icon style: Bold

Experiment with different icon styles and sizes to find the right look to match your brand.

Mobile drawer menu

This minimal style adopts the mobile design pattern which is used on all mobile devices. This style is the cleanest option, hiding the navigation into a mobile style drawer and keeps consistency between mobile and desktop:

Icon style: Text

When the menu text or icon is clicked, the slide-out mobile drawer is displayed on both desktop and mobile:

Icons

This design with icons uses the commonly recognized hamburger style icon to represent the menu. Example icons set to Small:

Icon style: Clean
Icon style: Modern
Icon style: Bold

Icon size set to Large:

Icon style: Clean
Icon style: Bold

The search icon is placed next to the mobile style hamburger icon for balance. Account and cart icons are on the far right.

Search icon toggle

The search icon can be hidden or shown by using the toggle checkbox:

Logo center menu left

This compressed design brings the brand logo to the middle and places the navigation menu to the left. Ideal for smaller/shorter navigations and keeping with a smaller header area:

Icons

Icon size set to: Small:

Icon size set to: Large:

Transparent header

When using a transparent header, you can experiment with different icon styles to help the icons standout with your background image. A large icon size sometimes helps to bring attention to the icons:

Find the transparent header options lower in the Header section settings: