The "Dynamic Header Block" allows you to separately manage the layout and content for both Desktop and Mobile views. With this block, you can pick and choose exactly which elements and icons you want included in your Header when the page is viewed on either a Desktop or Mobile device. This block can be found in the "Headers" section of the block library: 

Editing the "Desktop" Layout

To edit the "Desktop" layout, simply click the gray pencil icon in the top-right corner of the block and then click on the "Desktop Layout" tab:

You are provided with a live preview section which shows an example of the Desktop layout for the header. The preview section updates accordingly based on the elements and icons you choose to use. 

Actions

Choose from 1 of 3 available behaviors that you'd like your Desktop Header to adhere to for the page:

  1. Scrolls with Page (Default): The Desktop header will remain at the top of the page and disappears from view as the visitor scrolls down the page.
  2. Fixed on Screen (Sticky): The Desktop header will remain fixed to the top of the page and will scroll down the page with the page visitor. 
  3. Appears on Scroll Up: The Desktop header will disappear once the visitor has scrolled down 20% of the page, but will reappear again as soon as the visitor scrolls up. 

Elements

Elements within the header can be turned on or off to your liking, just check/un-check the box next to the element(s) you want included:

If you're using the "Headline" element, you can also set the "Headline Background Color" using the available setting. 

Icons

Icons within the header can also be turner on or off to your liking. Just check/un-check the box next to the icons you want used for the header: 

You can apply a Background Style (None, Outline or Solid), Background Color and Icon Color for the icons to fit your brand styles. 

Once your edits have been applied, click the "Save" button to save your changes: 

Editing the "Mobile" Layout

To edit the "Mobile" layout, simply click the gray pencil icon in the top-right corner of the block and then click on the "Mobile Layout" tab:

You are provided with a live preview section which shows an example of the Mobile layout for the header. The preview section updates accordingly based on the elements and icons you choose to use. 

Actions

Choose from 1 of 3 available behaviors that you'd like your Mobile Header to adhere to for the page:

  1. Scrolls with Page (Default): The Mobile header will remain at the top of the page and disappears from view as the visitor scrolls down the page.
  2. Fixed on Screen (Sticky): The Mobile header will remain fixed to the top of the page and will scroll down the page with the page visitor. 
  3. Appears on Scroll Up: The Mobile header will disappear once the visitor has scrolled down 20% of the page, but will reappear again as soon as the visitor scrolls up. 

Customize Mobile Header

You can apply a Background Style (None, Outline or Solid), Background Color and Icon Color for your mobile header to fit your brand styles.

Elements for your mobile header can be turned on or off to your liking. Just click the checkbox next to each one to enable or disable it:

Customize Mobile Menu

The mobile menu will be shown when the "hamburger menu" icon is clicked on your actual published page (doesn't work in preview mode):

Choose which menu items you want included for your mobile menu by checking/un-checking the box next to each available option:

Once your edits have been applied, click the "Save" button to save your changes: 

Did this answer your question?