How can I duplicate a header element on all my pages in Webflow without rebuilding it on each page?
TL;DR
- Create a Symbol (Component) from your header to make it reusable across pages.
- Drag the Symbol onto each page or CMS template to maintain a synced, global header that updates everywhere when edited.
To duplicate a header element across all pages without rebuilding it manually, you should use Webflow’s Symbols feature.
1. Convert the Header to a Symbol
- Select your header element (e.g., Navbar, Logo, Navigation links).
- In the right panel, click the Create Symbol button (now called Component in newer Webflow versions).
- Name your Symbol (e.g., “Site Header”).
- Webflow will now treat this header as a reusable Symbol.
2. Add the Symbol to Other Pages
- Open each page where you want the header to appear.
- In the Add panel (A key), open the Components tab.
- Drag and drop your “Site Header” Symbol onto the page.
- The Symbol will appear exactly as it was created and stays synced across pages.
3. Edit Header Once, Update Everywhere
- If you make a change to the Header Symbol (e.g., update a nav link), Webflow will apply the change to all pages using that Symbol.
- To make a local change only on one page, click Unlink from Symbol, but note this will remove its global sync.
4. Use on Template Pages (Collection Pages)
- You can also add the Symbol to CMS Collection Pages using the Collection Page Template Editor.
- This allows your header to appear consistently across dynamic CMS content.
Summary
Use Webflow’s Symbols/Components to create a reusable global header. This way, you only build your header once and can place it across all pages, keeping it synced and easy to update.