The "Dynamic Header Block" allows you to separately manage the layout and content for both Desktop and Mobile views of the Header. 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 / Icons

Elements and Icons within the header can be turned on or off to your liking, just check/un-check the box next to each one you want included:

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

Icon Styles

Click on the Icons element within the page editor to apply Icon Styles edits. You can apply an Icon Color, Background Style (None, Outlined or Contained) and Background Color and  for the icons to fit your brand styles. 

Note: Icon styles apply to both Desktop and Mobile views. 

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 and Menu

Just like for the Desktop view, Elements and Icons for your Mobile Header and Mobile Menu can be turned on or off to your liking. Just click the checkbox next to each one to enable or disable it:

The Mobile Menu will be shown when the "hamburger menu" icon is clicked on your actual published page (doesn't work in preview mode). The menu will also include the navigation links you've included in the Header:

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

Did this answer your question?