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.
This will simply render the header pushing the “upcoming” content to bottom.
This option will make the header to overlap the “upcoming” content.
This option will make the header to overlap the “upcoming” content, but also remain to the top while scrolling the page.
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.
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.