How do I set fixed headers and footers?
  • 06 Jan 2023
  • 1 Minute to read
  • Dark
    Light

How do I set fixed headers and footers?

  • Dark
    Light

Article Summary

With InVision you can set fixed headers and footers, adding an additional level of realism to your prototype.

Desktop

To set a fixed header or footer on a desktop prototype:

  1. Open your prototype and navigate to the desired screen.
  2. At the bottom of the page, click the Build mode icon ().
  3. At the top right of the page, check the box for Fixed Header or Fixed Footer.
  4. Depending on your selection, a slider will appear at the top or bottom of the screen. To adjust the header or footer size, click and drag the slider.
    You can also enter a specific pixel distance after selecting the checkbox for Fixed Header or Fixed Footer.
  5. To set the fixed header or footer on multiple screens, click the link Bulk edit at the top-right corner of the page, select the desired screens, and click Update fixed elements.
    invision-v6-bulk-edit-fixed-header-footer.png

After you’ve set the header or footer, click the Preview mode icon () to see it in action.

fixed-header-desktop.gif

Mobile

The footer option only appears when your screen is longer than the chosen mobile device skin.

To set a fixed header or footer on a mobile prototype:

  1. Open your prototype and navigate to the desired screen.
  2. At the bottom of the page, click the Build mode icon (build-mode-icon.png).
  3. To adjust the header, at the top right of the screen, click and drag the slider.
  4. To adjust the footer, at the bottom right of the screen, click and drag the slider.
    If you don’t want a header or footer, drag the slider to the top or bottom edge of the screen.
  5. To set the fixed header or footer on multiple screens, click the link Bulk edit fixed elements at the top-right corner of the page, select the desired screens, and click Update fixed elements.

Was this article helpful?