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:
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:
Modern icon style brings some darker elements to the icons and a different cart style:
Bold icon style is an even darker with solid elements:
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:
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:
Icons
Examples of icons when used with Logo beside menu style and sized Small:
Setting the icon size is set to Large can be helpful to balance whitespace and draw attention to the icons:
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:
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 size set to Large:
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:
Last updated
