PageNav appears above search results

[damithc]

v2.1.0

The problem:

PageNav elements appear over the search results.

[damithc]

@marvinchin @Chng-Zhi-Xuan any updates about this? This doesn't seem to happen to custom search results; only happens to Algolia search results.

[marvinchin]

I suspect that the z-index of the sidebar is higher than that of the Algolia search result dropdown. I will investigate this further tonight/tomorrow.

[marvinchin]

It seems like the issue is the sticky-top bootstrap class added in #733 adds the style z-index: 1030, causing the z-index to be higher than that of the Algolia search results (which is also the root cause for #802).

@Chng-Zhi-Xuan could I check if there is any present need for the z-index? In my opinion, the site and page navs should be in the same "layer" as regular page content. If this is the case, is it alright to remove the sticky-top class and add the required styles to the page-nav and site-nav classes directly instead?

Otherwise, we could add styles to the search results to increase the z-index (bootstrap z-index styles might work, but the class-names seem a little strange for our use case).

[Chng-Zhi-Xuan]

@marvinchin , there isn't a need for the z-index, it just comes with the sticky-top bootstrap class.

The sticky-top class was catered for top sticky elements that would overlap with the page contents as you scroll it.

However, in our case we explicitly define flex boxes for the page-nav and site-nav, so we will not have any overlapping elements.

Let's go with your suggestion (removing sticky-top class). We might also want to revert the changes made to z-index levels in MarkBind/vue-strap#101 and MarkBind/vue-strap#103.