Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Header Section
The Flex theme includes a highly customizable 'Header' section. The Header has 4 layout styles to choose from: Classic, Centered, Search Focus, and Vertical, and includes many built-in settings, including different alignment options for your main menu, enabling search, and the ability to add in your own custom CSS.
You can also configure the 'Top Bar' for the 'Classic,' 'Centered,' and 'Search Focus' header styles which will display above your 'Main Menu' and below the 'Announcement Bar' if you have that enabled.
In order to configure your Header, click into Customize (your Theme Editor) > Sections > Header.
In order to choose the layout style for your Header, click into Customize (your Theme Editor) > Theme Settings > Layout > Header.
Header Settings & Styles
The section settings allow you to enable features in your Header. There are four different header layout styles to choose from within the theme: classic, centred, search focused, and vertical.
You can select which layout style you'd like to use under Customize > Theme Settings > Layout. Although there is some cross-over with what settings are available in each header style, a few options are only available in certain layouts.
Select a Header Style
-
Header Style: Classic
The 'Classic' header style allows for a traditional, default layout with the logo on the left hand side and the navigation beside.
Logo
Logo/WidthYou can upload a 'logo' for your Header here which will appear on the left hand side when set to the 'Classic' header style. The logo 'width' can be adjusted as well from 80 - 300px.
Navigation
Main menu/Menu alignmentYou can select the menu you'd like to display in the Header here and decide the alignment – left, center or right.
Search
Show searchYou can choose to enable the 'search' in your Header which will display as a magnifying glass icon. You can configure the specifics of your Search within Theme Settings > Search. Your 'Search results' can be set to 'Products' or 'Everything'.
Icons
StyleIn the Header, icons will display for your Cart, Search and Login (if enabled). However, you can set the icon 'style' in the settings. Choose from 'icons only,' 'text only' and 'icons and text.'
Overlay
If you'd like your Header/Main Menu to overlay directly on top banner images (instead of displaying above them) you can check off the 'enable overlay' setting.
Show text shadow
If your banner image is a similar color to your menu navigation links, you might want to enable the 'show text shadow' setting to improve legibility!
If the overlay is enabled, you can choose a 'link color' and a 'link hover' for when your main menu navigation links are overlaid. When the main menu navigation links are not overlaid (ex: If you go onto a page that does not have a top banner image) they will go back to being your default link color.
Background/Background opacity
If you have the overlay enabled but would still like your Header/Navigation to have a background color, you can select one in the 'background' setting, and also adjust the 'background opacity' if you want it to have some transparency.
If you'd like your Header/Navigation to display an alternate logo when the overlay is enabled, you can upload one in the 'overlay logo' setting. You can then adjust the 'overlay logo width' as well between 30 - 300px.
Sticky Header
If you'd like your Header/Navigation to become fixed when scrolling down the page, you can check off the 'enable sticky on scroll' setting. You can then adjust the 'background opacity' and 'logo width' specifically for the sticky header as well if you'd like.
Layout
Within the layout settings, you can select the 'width' of your Header content, as well as the 'vertical alignment' of the navigation/main menu links.
WidthYou can choose between 'wide' and 'standard' for the 'width' setting. Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width.
The 'vertical alignment' setting applies to how your navigation links will align with the logo. Choose from 'top,' 'center' and 'bottom.'
Advanced
The Header includes an option to add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Top Bar
In the 'Classic' Header style, the 'Top Bar' is an optional feature. To enable it, head into Customize > Sections > Top Bar > Show top bar.
Within the typography settings, you can select a font, capitalization, choose the base size and letter spacing.
Top bar colors
The background, link, link hover, and text colors for the 'Top Bar' can be configured here.
Layout
Within the layout settings, you can select the 'width' which will apply to your Top Bar content. You can choose between 'wide' and 'standard' for the 'width' setting. Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width
Advanced
The Top Bar includes an option to add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Within the Top Bar, you can add a menu, social media icons and additional text.
-
Header Style: Centered
The 'Centered' header style allows you to center both your logo and your main menu. The logo can be in between your main menu, or above the main menu.
Logo
Logo/Width/Logo positionYou can upload a 'logo' for your Header here and adjust the 'width' from 80 - 300px. When the Header style is set to 'Centered' you can select the 'logo position' to be either 'above menu' or 'between menu.'
Navigation
You can select the menu you'd like to display in the Header here and decide the 'menu spacing' as well to spread out your navigation links! The 'Menu spacing' options are 'default,' 'minimum,' and 'maximum.'
Overlay
If you'd like your Header/Main Menu to overlay directly on top banner images (instead of displaying above them) you can check off the 'enable overlay' setting.
If your banner image is a similar color to your menu navigation links, you might want to enable the 'show text shadow' setting to improve legibility!
If you have the overlay enabled but would still like your Header/Navigation to have a background color, you can select one in the 'background' setting, and also adjust the 'background opacity' if you want it to have some transparency.
If the overlay is enabled, you can choose a 'link color' and a 'link hover' for when your main menu navigation links are overlaid. When the main menu navigation links are not overlaid (ex: If you go onto a page that does not have a top banner image) they will go back to being your default link color.
If you'd like your Header/Navigation to display an alternate logo when the overlay is enabled, you can upload one in the 'overlay logo' setting. You can then adjust the 'overlay logo width' as well between 30 - 300px.
Sticky Header
If you'd like your Header/Navigation to become fixed when scrolling down the page, you can check off the 'enable sticky on scroll' setting. You can then adjust the 'background opacity' and 'logo width' specifically for the sticky header as well if you'd like.
Layout
WidthWithin the layout settings, you can select the 'width' which will apply to your main menu links. You can choose between 'wide' and 'standard' for the 'width' setting. Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. This is most noticeable if you have a lot of menu items in your navigation.
Advanced
The Header includes an option to add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Top Bar
If you choose the 'Centered' style, a 'Top Bar' will also be included in the Header which will display above your 'Main Menu' and below the 'Announcement Bar' if you have that enabled. Settings for the 'Top Bar' can be found in Customize > Sections > Top Bar.
The 'Top Bar is where your cart, search and social media icons are included.The first area of the 'Top Bar' settings is where you can decide what content you'd like to include. You can enable the 'social media icons,' add in some text and enable the 'search' which will then display a magnifying glass icon.
Within the typography settings, you can select a font, capitalization, choose the base size and letter spacing.
The background, link, link hover, and text colors for the 'Top Bar' can be configured here.
Show searchYou can choose to enable the 'search' in your Header which will display as a magnifying glass icon. You can configure the specifics of your Search within Theme Settings > Search. Your 'Search results' can be set to 'Products' or 'Everything'.
In the Top Bar, icons will display for your Cart, Search and Login (if enabled). However, you can set the icon 'style' in the settings. Choose from 'icons only,' 'text only' and 'icons and text.'
You can also select specific colors for the cart icon as well with the 'cart button background' and 'cart button text' settings.
Advanced
The Top Bar includes an option to add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
-
Header Style: Search Focus
The 'Search Focus' header style displays a prominent search bar and is great for large inventory shops. You can configure the specifics of your Search within Theme Settings > Search. Your 'Search results' can be set to 'Products' or 'Everything'.
If you'd like to add 'placeholder text' in the search bar, you can do so in the Language Files (Online Store > Themes > Actions > Edit Languages) under General > Search > Placeholder.
Logo
Logo/WidthYou can upload a 'logo' for your Header here which will appear on the left hand side when set to the 'Search Focus' header style. The logo 'width' can be adjusted as well from 80 - 300px.
Search button
You can set the specific colors for both the 'background' and the 'icon' of the search button.
Icons
StyleIn the Header, icons will display for your Cart and Login (if enabled). However, you can set the icon 'style' in the settings. Choose from 'icons only,' 'text only' and 'icons and text.'
Navigation
Main menu/Menu alignmentYou can select the menu you'd like to display in the Header here and decide the alignment – left, center or right.
Sticky Header
If you'd like your Header/Navigation to become fixed when scrolling down the page, you can check off the 'enable sticky on scroll' setting. You can then adjust the 'background opacity' and 'logo width' specifically for the sticky header as well if you'd like.
Layout
Within the layout settings, you can select the 'width' of your Header content.
WidthYou can choose between 'wide' and 'standard' for the 'width' setting. Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width.
Advanced
The Header includes an option to add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Top Bar
In the 'Search Focus' Header style, the 'Top Bar' is an optional feature. Within the 'Top Bar,' you can choose to display your social media icons, menus, and additional text. To enable it, head into Customize > Sections > Top Bar > Show top bar.
Within the typography settings, you can select a font, capitalization, choose the base size and letter spacing.
The background, link, link hover, and text colors for the 'Top Bar' can be configured here.
You can select the 'width' which will apply to the content in your Top Bar.
You can choose between 'wide' and 'standard' for the 'width' setting. Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. This is most noticeable if you have a lot of content in your Top Bar.
Advanced
The Top Bar includes an option to add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Within the Top Bar, you can add a menu, social media icons and additional text.
-
Header Style: Vertical
The 'Vertical' header style allows for a vertical that displays on the left-hand side of the screen that remains fixed when scrolling down through the site. The vertical header is configured by adding content blocks in the Theme Editor (customized) that can be dragged and re-ordered.
Logo
Logo/Logo widthTo add a logo, click 'Add Content' > Logo. You can upload the image for your logo here. The logo 'width' can be adjusted as well from 20 - 100%.
Icons
To add icons for the cart, login and search, click 'Add Content' > Icons.
StyleIn the Header, icons will display for your Cart, Search and Login (if enabled). However, you can set the icon 'style' in the settings. Choose from 'icons only,' 'text only' and 'icons and text.'
The search icon is optional by enabling/disabling the 'show search icon' setting.
Navigation
Main menuTo add your navigation to the Header, click 'Add Content' > Navigation. You can select the menu you'd like to display.
Background/Links/Links hoverYou can choose specific background, link and hover colors for your menu items in the navigation here.
Search form
To add a search field to the Header, click 'Add Content' > Search form. You can configure the specifics of your Search within Theme Settings > Search. Your 'Search results' can be set to 'Products' or 'Everything'.
Social media
If you'd like your social media icons to display in the Header, click 'Add Content' > Social media. Your social media links can be added to the theme under Theme Settings > Social Media.
Text
If you'd like to add some additional text to the Header, click 'Add Content' > Text. Here you can add a heading and additional text.
Copyright
To add some copyright text, Shopify and theme designer credits to the Header, click 'Add Content' > Copyright text. By default, ©, The Year, and your Shop Name will display as well when this content block is added.
Payment icons
To add payment icons to the Header, click 'Add Content' > Payment icons. The icons that show are determined by your what you've set up in your store's payment settings.
Alignment
The content in the vertical header can be either left aligned or center aligned.
Advanced
The Header includes an option to add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Examples
Example 1: Classic
Settings
- Header style - Classic
- Announcement bar - enabled
- Top bar - Enabled
- Width - wide
- Content added - Social media, Text
- Logo width - 80px
- Menu alignment - center
- Icon style - icons only
- Enable overlay - enabled
- Show text shadow - enabled
- Width - wide
- Vertical alignment - center
Example 2: Centered
Settings
- Header style - Centered
- Announcement bar - enabled
- Top bar
- Show social icons - enabled
- Show search - enabled
- Capitalization - none
- Icon style - text only
- Logo width - 120px
- Logo position - between menu
- Menu spacing - minimum
- Width - standard
Example 3: Search focus
Settings
- Header style - Search focus
- Announcement bar - enabled
- Logo width - 210px
- Icon style - icons only
- Menu alignment - center
- Width - wide
Example 4: Vertical
Settings
- Header style - Vertical
- Alignment - center
- Content block 1
- logo
- width - 75%
- Content block 2
- Navigation
- Content block 3
- Social media
- Content block 4
- Icons
- Icon style - icons only
- Show search icon - enabled
- Content block 5
- Navigation
Mobile Layout
Flex includes mobile specific settings for the Header and Navigation that can be configured in Customize (your Theme Editor) > Theme Settings > Mobile.
The mobile settings include options to upload an alternate logo and adjust the positioning. These settings also allow you to choose specific colors for your navigation on mobile as well.
Logo
If you'd like to upload an alternate logo for mobile, you can do so here! An image of 600 x 200px is recommended.
Width
You can adjust the mobile logo width specifically here and have it differ from the desktop logo width. Choose from 80 - 300px.
Mobile Logo position
On mobile, you can choose whether you'd like your logo to display in the center, to the left, or below the header.
Mobile header icon position
On mobile, you can choose whether you'd like the hamburger menu to display on the left or right side of the header!
Show search icon
You can choose to hide or show the search icon in the mobile header.
Icons style
You can choose the icons style for specifically the mobile header. Choose from icons only, text only, or icons and text.
Navigation
The mobile navigation settings will affect your main menu links and its background.