WebSite X5Help Center

 
Robert H.
Robert H.
User

Website X5 v15: How to create sticky bar/header that is always visible?  en

Auteur : Robert H.
Visité 489, Followers 1, Partagé 0  

Hi there!

I am using Website X5 Evoluation v15, and I would like to create either a header (or possibly sticky bar) that is always visible at the top of the page. It should be visible whether you have scrolled down the page or not, and it should not slide into view or be animated in any way. It should just always be visible, no matter where you are on the page.

The behavior I'm going for is illustrated by the headers on these example pages:

I have seen suggested solutions for this issue for previous versions of the X5 software, but they do not seem to work for version 15.

I'm not afraid of writing a bit of code if need be. I'd really appreciate a solution. Thanks in advance!

Posté le
1 RéPONSES - 1 CORRECT
Robert H.
Robert H.
User
Auteur

LOL, of course, moments after submitting this question, I believe I've discovered a solution! (Found it in this post: https://helpcenter.websitex5.com/fr/post/155775 thanks Jamie B!) I'll post it here in case anyone else comes across this post looking for a solution.

Here is the code you need...

<style>

#imHeaderBg, #imHeader, #imHeaderObjects, #imMnMnContainer, #imMnMn {

position: fixed;

z-index:100;

}

</style>

...and here is where you need to put it:

For a specific page only:

  • Go to Step 3: Map
  • Select the page you want from the list that is shown
  • Click the "Properties" button towards the top (icon shows a white page with a yellow gear)
  • Click the "Expert" tab in the upper right
  • Under "Custom Code", make sure Before closing the HEAD tag is selected from the dropdown menu
  • Paste the code in the text box

For your entire site/all your pages:

  • Go to Step 1: Settings
  • Click on the "Advanced" tab in the upper right
  • Click on the "Statistics, SEO and Code" button
  • Click on the "Expert" tab in the upper right
  • Under "Custom Code", make sure Before closing the HEAD tag is selected from the dropdown menu
  • Paste the code in the text box

This worked for me in v15.0.1 when I started from a blank template. I hope it works for you too. Best of luck!

Lire plus
Posté le de Robert H.