Header Positions and overlapping content.

You are here:
Estimated reading time: 1 min

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.

Relative Header in action. As seen, the image goes after the header block.

Absolute

This option will make the header to overlap the “upcoming” content.

Absolute Header in action. As seen, the image goes under the header block.

Fixed

This option will make the header to overlap the “upcoming” content, but also remain to the top while scrolling the page.

Fixed Header in action. As seen, the image goes under the header block that remains sticked to the top.

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.

Edit the pages and select the Header position to override the one from Customizer > Header > General > Header position.

Was this article helpful?
Dislike 0
Views: 58

Join the conversation