GET REY

Header Positions and overlapping content.

You are here:
Estimated reading time: 1 min
In this article

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.

LinkRelative

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.

LinkAbsolute

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

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

LinkFixed

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.

LinkOverlapping 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.

LinkOverriding 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:

An example of Homepage, Shop page and a normal page.

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 2
Views: 9145

3 Replies to “Header Positions and overlapping content.”

  1. 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)

    1. Jakub

      With forced overlapping but without “sticky”

    2. 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!

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!