To keep something on screen while the page scrolls under it, select it, go to Inspector > Metrics and tick Always On Top and Fixed position. On a Responsive page, tick them on the Container that holds your menu, not on the menu itself. Then make sure the top of your page isn't hidden behind it.
Building a header for every page? Do this on your Master Page, so it works everywhere. See Put the same header, menu and footer on every page with a Master Page.
Responsive pages
- Put your logo and navigation menu in a Container set to Row, and tick Full width on the Container. See Build a responsive page with Containers so it stacks neatly on a phone.
- Give the Container a background so the page doesn't show through it: Inspector > Shape Options, then a Color Fill.
- Select the Container. Click an empty part of it, or right-click and use Pick Layer.
- In Inspector > Metrics, tick Always On Top, then Fixed position.
- Keep the top of the page clear. The header now floats over the page, so your first heading can slide under it. Add a shape just below the header, set its Fill to None, make it the same height as the header, and leave Fixed position unticked. It holds the space open.
- Click Preview and scroll.
Fixed position is greyed out? You've selected something inside a Container or Responsive Row. Select the Container or Row instead.
Centered Layout pages
- Select the menu, and in turn each other object in your header, such as the logo and the shape behind them.
- In Inspector > Metrics, tick Always On Top and Fixed position on each one.
- Each one stays where you placed it, and stays centered with the page when the browser window is wider. To fix it to the left edge of the browser window instead, tick Relative to browser left, under Fixed position. This box only appears on Centered Layout pages.
- If the start of your page hides behind the header, add a spacer shape as in step 5 above.
A button that stays in a corner
For a "Call us" or "Book now" button that's always on screen on a Responsive page:
- Select the button and tick Allow free dragging in Inspector > Metrics.
- Drag it where you want it.
- Click Pin Settings, and pin it to the side you want, such as right and bottom, so it keeps that spot as the screen gets narrower.
- Tick Always On Top and Fixed position.
Which setting does what
| Setting | What it does |
|---|---|
| Fixed position | Stays in the same place in the browser window while the page scrolls |
| Always On Top | Sits in front of everything else, so photos and text don't cover it |
| Pin Settings | On Responsive pages, where the object sits as the screen gets narrower. It doesn't keep it on screen while scrolling |
| Relative to browser left | On Centered Layout pages only: fixes the object to the left edge of the browser window instead of the page |
Test it on a phone
Click Preview in the toolbar, choose Preview QR Code and scan it with your phone. On a phone, a tall fixed header can take up a large part of the screen. Keep it short. If it's still too big on phones, use a version that doesn't stay fixed there: see Hide or show objects on phones, tablets or computers (Show on Device).
Common problems
| What you see | What to do |
|---|---|
| Fixed position is greyed out | Select the Container or Row that holds the object |
| Page titles are hidden behind the header | Add the spacer shape (step 5), or make it taller |
| Photos or text show on top of the header while scrolling | Tick Always On Top on the header Container, and make sure it isn't ticked on the photos |
| It only stays fixed on some pages | The header is on those pages, not on the Master Page. Move it to the Master Page |
| You can't find the object in EverWeb after scrolling | A fixed object stays still in EverWeb too. Scroll back up, or make the window wider |