Viewing sticky header problems

sticky header problems

User: Carole F. 2 years ago
I am creating a responsive website. I have created a master page with a responsive row containing a ext box and navigation menu.

When I try to make the responsive row a sticky header two things happen:
1. The responsive row I add in a separate page sticks to the top of the page. I cannot get the responsive row with the image to stay below my menu bar.
2. When scrolling the image up, the image shows in a margin above the sticky header, which should be white.

everweb Project window.jpeg

everweb preview window.jpeg
User: Roddy 2 years ago
Creating responsive pages is a little different from fixed with drag and drop. The items are positioned relatively rather than absolutely.

This means that, if you place a fixed position item above a relatively positioned one, the relative item will slide up behind the fixed one - or over the top if it has a higher z-index.

To have your nav fixed and prevent the item below from sliding up up you need to apply a relatively positioned item with the same height as the nav. This would ideally be incorporated in the navigation widget.

Here's an example of a fixed nav which has the added benefit of show/hide so that it doesn't remain in view as the visitor scrolls down. It only appears when scrolling is reversed or when the bottom of the page is reached.

The widget clears the item below by default but can be made to overlay the item below by checking a box if required.

On the example page, the logo header with optional phone could be placed below the navigation if that's where you need it.

If you really must use the responsive row, the quick and dirty fix would be to placed and empty item - the same height as the row widget - above it. This will push the image down the page and stop the fixed item from overlapping it at the top.


NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.

Post Reply
You must login or signup to post.