When Fixed does not work in Framer

You may have been confused when trying to set elements like headers or navigation to Fixed in Framer, only to find the option disabled. This is because Framer has specific conditions where the Fixed property can be applied.

How to set specific elements to Fixed

Only elements at the page level can be Fixed. Since Fixed involves fixing a position within the viewport, the element must be directly nested in the main page. This allows you to determine where within the viewport the element should be fixed.

Example: When Fixed is possible

Elements placed directly at the page level, like navigation, can be set to Fixed.

Example: When Fixed is not possible

If an element is nested within a Frame as shown below, the element cannot determine its position relative to the viewport, so the Fixed option is disabled.

If you have tried setting it and Fixed still doesn’t apply, please contact the support team via Framer Contact page.

Frequently Asked Questions (FAQ)

Q. Are Fixed elements always fixed only at the top of the browser?

• No. In Framer, you can freely adjust the position of Fixed elements. You can fix them in the top, bottom, left, right, or any preferred location.

Q. Can Fixed elements have different positions for each Breakpoint?

• Yes. You can individually set the position/size/margin for each breakpoint. For example, you can assign center alignment for mobile and left fixation for desktop as needed.

Q. If multiple Fixed elements are used, will they conflict?

• No. You can have multiple Fixed elements. However, if their area overlaps, they may visually overlap, so it's recommended to properly adjust the Z Index.

This article is a translated and adapted content from Framer's official blog, ‘Why can’t I set an element to position Fixed?’.