Rey supports the following positions:
- Relative (default)
- Absolute. It will be positioned over the content.
- Fixed. It will be positioned over the content and sticked to the site top edge, on scroll.
Relative
This will simply render the header pushing the “upcoming” content to bottom.
Absolute
This option will make the header to overlap the “upcoming” content.
Fixed
This option will make the header to overlap the “upcoming” content, but also remain to the top while scrolling the page.
Overlapping content (option)
Both Absolute and Fixed header positions have an option to disable overlapping. While it doesn’t make too much sense to disable them (you’d better use Relative), there are cases when it’s useful to disable overlapping, for instance:
- When you want to keep Fixed to top, but don’t want the content to stay over the upcoming content;
- When you want to disable overlapping on tablets or mobiles;
- Probably other cases too.
Overriding position per page
You might have noticed that in some of Rey’s demos, homepage (or shop page) header is different than the rest of the site eg:
As seen in the screenshots below:
- The homepage has Absolute position (over the slider), has white text and white custom logo;
- The Shop page Absolute position, while the text and logo are inherited from global settings in Customizer.
- The pages header simply display global settings from Customizers.
So in this scenario, the homepage and shop pages are exceptions from the rule. So it’s recommended to only change the position on the specific page’s options, and depending on the case, the Header text color, Logo etc.
3 Replies to “Header Positions and overlapping content.”
Jakub
Hello, the overlapping header doesn’t work with the header in mobile? I have been trying everything I could (it works problely on tbalet and computer)
Jakub
With forced overlapping but without “sticky”
mariushoria[ Post Author ]
Hey Jakub,
Try this please, in Customizer > Header > General, make sure to have the Overlap options disabled eg: https://d.pr/i/pRSgfK . Afterwards, access Homepage in the backend and make sure to enable Overlapping eg: https://d.pr/i/NeLNZ8 . Basically overlapping should be disabled sitewide so that the header doesn’t stay over the content, however onto the homepage, it should be treated as an exception because it needs the header to stay over the image. Hope it makes sense!