Flex Header, Footer, Popup

Flex Guide: Header

flex-header-styles.jpg

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.
header-layout-settings-min.gif

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.


    header-classic-example.png

     

    Logo

    Logo/Width

    You 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.
    classic-logo-width-min.gif

     

    Navigation

    Main menu/Menu alignment

    You can select the menu you'd like to display in the Header here and decide the alignment – left, center or right.

    classic-menu-alignment-min.gif

     

    Search

    Show search

    You 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'.

    classic-show-search-min.gif

     

    Icons

    Style

    In 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.'
    classic-icon-style-min.gif

     

    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.
    classic-enable-overlay-min.gif

     

    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!
    classic-show-text-shadow-min.gif

     
    Link color/Link hover

    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.
    classic-overlay-link-colors-min.gif

     

    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.
    classic-background-color-opacity-min.gif

     
    Overlay logo/Overlay logo width

    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.

    classic-overlay-logo-min__1_.gif

     

    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.


    classic-sticky-header-min.gif

     

    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.

    Width

    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.


    classic-layout-width-min.gif

     
    Vertical alignment

    The 'vertical alignment' setting applies to how your navigation links will align with the logo. Choose from 'top,' 'center' and 'bottom.'


    classic-vertical-alignment-min.gif

     

    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.



    classic-custom-css-min.gif

     

    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.


    classic-show-top-bar-min.gif
     
    Top bar typography

    Within the typography settings, you can select a font, capitalization, choose the base size and letter spacing.
    classic-top-bar-typography-min.gif

     

    Top bar colors

    The background, link, link hover, and text colors for the 'Top Bar' can be configured here.
    classic-top-bar-colors-min.gif

    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
    classic-top-bar-width-min.gif

     

    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.


    classic-top-bar-advanced-css-min.gif

     
    Top Bar Content

    Within the Top Bar, you can add a menu, social media icons and additional text.

    classic-top-bar-add-content-min.gif

  • 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.


    header-centered-example.png

     

    Logo

    Logo/Width/Logo position

    You 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.'

    centered-logo-min__1_.gif

     

    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.'

    centered-menu-spacing-min.gif

     

    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.

    centered-enable-overlay-min.gif

     
    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!

    centered-show-text-shadow-min.gif
     
    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.

    centered-background-min.gif
     
    Link color/Link hover

    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.

    centered-link-color-min.gif
     
    Overlay logo/Overlay logo width

    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.

    centered-overlay-logo-min.gif
     

    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.

    centered-sticky-header-min.gif
     

    Layout

    Width

    Within 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.

    centered-layout-width-min.gif
     

    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.


    centered-advanced-css-min.gif
     

    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.

     
    Top Bar

    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.


    centered-top-bar-content-settings-min.gif

     
    Top bar typography

    Within the typography settings, you can select a font, capitalization, choose the base size and letter spacing.
    centered-top-bar-typography-min.gif

     
    Top bar colors

    The background, link, link hover, and text colors for the 'Top Bar' can be configured here.
    centered-top-bar-colors-min.gif

     
    Search

    Show search

    You 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'.

    centered-show-search-min.gif
     
    Icons

    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.
    centered-top-bar-icons-min.gif

     

    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.



    centered-top-bar-css-min.gif

  • 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'.

    header-search-focus-example.png

    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.

    search-focus-placeholder-text.png

     

    Logo

    Logo/Width

    You 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-focus-logo-min.gif

     

    Search button

    You can set the specific colors for both the 'background' and the 'icon' of the search button.

    search-focus-search-button-colors-min.gif

     

    Icons

    Style

    In 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.'
    search-focus-icons-style-min.gif

     

    Navigation

    Main menu/Menu alignment

    You can select the menu you'd like to display in the Header here and decide the alignment – left, center or right.

    serach-focus-navigation-alignment-min.gif
     

    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.

    search-focus-sticky-header-min.gif
     

    Layout

    Within the layout settings, you can select the 'width' of your Header content.

    Width

    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.

    search-focus-width-min.gif
     

    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.


    search-focus-advanced-css-min.gif
     

    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.

    search-focus-show-top-bar-min.gif
     
    Top bar typography

    Within the typography settings, you can select a font, capitalization, choose the base size and letter spacing.
    search-focus-top-bar-typograhy-min.gif

     
    Top bar colors

    The background, link, link hover, and text colors for the 'Top Bar' can be configured here.

    search-focus-top-bar-colors-min.gif

     
    Layout

    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.
    search-focus-top-bar-width-min.gif

     

    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.

    search-focus-top-bar-css-min.gif

     
    Top Bar Content

    Within the Top Bar, you can add a menu, social media icons and additional text.

    search-focus-top-bar-add-content-min.gif

  • 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.

    vertical-example-image.png

     

    Logo

    Logo/Logo width

    To 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%.

    vertical-logo-width-min.gif

     

    Icons

    To add icons for the cart, login and search, click 'Add Content' > Icons.

    Style

    In 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.

    vertical-icons-min.gif
     

    Navigation

    Main menu

    To add your navigation to the Header, click 'Add Content' > Navigation. You can select the menu you'd like to display.

    Background/Links/Links hover

    You can choose specific background, link and hover colors for your menu items in the navigation here.

    vertical-navigation-min.gif
     

    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'.

    vertical-search-form-min.gif

     

    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.

    vertical-social-media-icons-min.gif

     

    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.

    vertical-text-min.gif

     

    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. 

    vertical-copyright-text-min.gif

     

    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.

    vertical-payment-icons-min.gif

    Alignment

    The content in the vertical header can be either left aligned or center aligned.

    vertical-alignment-min.gif
     

    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.


    vertical-custom-css-min.gif
 

Examples

Example 1: Classic

header-example-1.png

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

header-example-2.png

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

header-example-3.png

Settings

  • Header style - Search focus
  • Announcement bar - enabled
  • Logo width - 210px
  • Icon style - icons only
  • Menu alignment - center
  • Width - wide
 

Example 4: Vertical

header-example-4.png

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.

mobile-header-settings.png

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-header-width-min.gif

 

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!

header-mobile-header-icon-position-min.gif

 

Show search icon

You can choose to hide or show the search icon in the mobile header.

mobile-header-show-search-icon-min.gif

 

Icons style

You can choose the icons style for specifically the mobile header. Choose from icons only, text only, or icons and text.

mobile-header-icons-style-min.gif

 

Navigation

The mobile navigation settings will affect your main menu links and its background.

mobile-navigation-settings.png

mobile-navigation-settings-min.gif

Related articles