Fixed Header when scrolling: Sticky Button or on-board Option? 
Author: Holger M.
Visited 375,
Followers 1,
Shared 0
I am looking to build a website with a fixed header (i.e. whenever I scroll, the header doesn't move). How do I implement this?
a) Is there an onboard function?
b) If the sticky button is the only workaround, how do I set an anchor with an offset of e.g. 200 px., so that the beginning of the section will not be covered by the sticky button?
Thanks!
Posted on the
Hello. You can use a Sticky Bar. Here is an example. You can add there not only a menu, but also anything you want.
I have a video tutorial for more details. But it is included in the paid video tutorial.
In WebsiteX5 under...
1 Settings > Statistics and Code / Code
...paste the CSS code at...
Custom code
Before closing HEAD tag
<style>
#imHeaderBg, #imHeader { position: fixed; z-index:9999; }
</style>
... then the header is fixed at the top of the bowser.
See my test page >> https://findelinks.de/123test-aufklappmenue/
.
----- Screenshot (German version) -----
After testing, I added a line to the CSS code so that an additional sticky bar would not appear on narrower screens.
----- New CSS code -----
<style>
#imHeaderBg, #imHeader { position: fixed; z-index:9999; }
#imStickyBarContainer { display: none !important; }
</style>
----- Screenshot -----
The content under the header is not obscured by my CSS code, this is just to clarify in case my screenshot above caused any confusion.
-----
Hello Holger
An easy way to use an offset in combination with an anchor is described in this post:
https://helpcenter.websitex5.com/en/post/238608
Use this code
<style>
div[id^='Anchor'] {
top: -50px;
}
</style>
You place the code in the 1 Settings > Statistics and Code / Code.
Once you have done this, you just have to name your anchors beginning with Anchor.
Example: An anchor is named Anchor01. Then by using the anchor it will use an affset of -50.
If your sticky menu is higher than 50, let's say 100 then specify .100px in the code instead.
You only need to set in the code once in your project. Then using Anchorxx on any page will result in an offset of the specified offset.
If you want to use an anchor without offset you just give it a name NOT starting with Anchor.
I have a project (bramminginfo.dk) where I use the code.
I use a prefix of Anker instead of Anchor.
You can see this page: https://bramminginfo.dk/hollenderskoven.html
On that page I use a lot of anchors. In the lower left corner I have made a collection/pagemenu of the anchors.
If you specify the page with an anchor like this:
https://bramminginfo.dk/hollenderskoven.html#Anker_originalerne
Then you will see the anchor starting an offset from the top. The offset is chosen so that it matches the height of my sticky-bar.
(It > En) ... I created the offset code for the anchors in 2012 for the .EVO.v12, ....but it's all relative, and depending on the case there are other inventions of mine for Anchors and Dynamic Anchors...
... for this case of yours b), ... if you post the LINK of this page of yours, I could make an evaluation to see if it is possible to simplify, ...the same goes if you use the header and/or the StickyBar ...
... if you post the LINK I will then return here...
.
ciao
.