Sticky header & footer in v.13 
Author: Michael G.
Visited 3741,
Followers 3,
Shared 0
In version 10, I used HTML code like this in the header to fix the header and and menu at the top of the page and the footer at the bottom. In other words, create sticky objects.
<style type="text/css">
#imHeader {position: fixed; top: 0px; z-index: 50;}
#imMnMn{position:fixed; top: 10px; z-index:50; }
#imContent, #imContentGraphics {padding-top: 55px; padding-bottom:50px;}
#imFooter {position:fixed; bottom:0px; z-index: 50;}
</style>
This worked fine, but in version 13, I find the same code fixes the vertical positions right enough, but the header and footer move to the left side of the browser window and don't stay centred as they used to. What do I need to add to make them centred?
Posted on the
Hello Michael,
Unfortunately I cannot help you with the use of custom code, but if you have any doubts or issues on how to add them in the pages you made with WebSite X5 you can ask me. Generally speaking since the functions do not depend on WebSite X5, you can search useful information about the custom code with search engines like google or wait until someone on the community of Answers can help you.
Many thanks!
I think this should be really made available in X5 as a standard option.
To fix the header / footer is so wide spread, I don't understand it is available in X5...
The new option to keep the menu visible when scrolling is nice but really not the same.
hi
please see this post https://helpcenter.websitex5.com/en/post/155775
regards
jamie
Author
Thanks for the link, Jamie, but the header still moves to the left of the browser window. However, the menu stays where it should, which it did anyway. It seems that HTML code such as, this pasted in the header, overwrites anything you may set in template properties. I first used my code in version 10 where it worked fine with everything staying on the centre line. This time, it looks like you have to put in some code that will realign the components, but I don't know what the code is! I cribbed my original code from the Internet, but I can't remember where.
Actually, I had no problem with the header wandering off to the left. I set it to be full width and had a logo on its left edge, so that was fine. My problem was with the footer. Even making it full width, the centrally placed text wandered off left of centre screen to be in the centre of where the footer would have been had I not made it full width - if you follow me. If the header logo had been anywhere else than to the left of the header, it too would have come out in the wrong place.
Author
I found it!!!!! To centre the header or footer, the <margin: auto;> command often touted doesn't work. You need a combination of 2 commands:
<left: 50%;> shifts the object so the left edge is 50% of the width of the browser window
Follow this with <margin-left: (half the object width);> and the left edge shifts half the width of the object, thus centering it. So in my case, where the header and footer are both the same as the page width of 960 pixels, the header and menu are fixed at the top of the browser window and the footer at the bottom, the whole command string is:
<style type="text/css">
#imHeader {position: fixed; left: 50%; margin-left: -480px; z-index: 50;}
#imMnMn {position:fixed; z-index:50;}
#imContent, #imContentGraphics {padding-top: 55px; padding-bottom:80px;}
#imFooter {position:fixed; left: 50%; margin-left: -480px; bottom:0px; z-index: 50;}
</style>
This code is placed in an html object placed in either the header or the footer.
Note the z-index commands. These ensure the page contents (which generally have a z-index less than 50) scroll behind the header and footer. The padding commands for the page content make sure that the page top comes below the header and the page bottom clears the footer when the page is fully scrolled. These figures depend on the heights of the header and footer and may need adjusting in other cases. If the menu is not inside the header (as mine is) you have to add its height to the header height. You need first to set the top and bottom margins to 0 on the template settings page, otherwise these padding commands get screwed up.
I haven't used header or footer backgrounds here. If you want to use them as well and fix them, then use similar commands on #imHeaderBg and #imFooterBg (see below). But, of course, they don't need any centering commands as they are full browser window width and have no content.
Further, you may want to do what I plan to do, which is alter the header to have the site logo on the left of the browser window and the menu on the right. You need to put the website logo image on the left edge of the header, add the command <width: 100%;> to its html line and dispense with the centering commands. You also have to add the command <right: 0px;> to the menu. So their lines now become:
#imHeader {position: fixed; width: 100%; z-index: 50;}
#imMnMn {position:fixed; right: 0px; z-index:50;}
I'm going to have a full width footer as well, but I have some content that I want to keep centrally in the browser window. So I'm going to leave the footer commands as above and make the footer background the same height and colour as the footer. So you need to add the line:
#imFooterBg {position:fixed; !important; z-index: 50;}
Actually, the !important bit doesn't seem to do anything in preview. But it was there in my original crib sheet, so I would leave it in. Different browsers behave differently and you may need it for some. It wasn't ever in the header background code, though.