Header moves depending on page vertical length 
Author: Guillermo A.
Visited 1367,
Followers 1,
Shared 0
Hello,
I have created a Header with some elements that link to different pages. Everytime I navigate by clicking on this elements the Header moves right to left to compensate if there is a scroll bar on the right hand side of the web browser.
I find that unpleasant and that makes my website look amateur. Any way to fix it
Thanks!
Posted on the
Author
I think I succeded by setting the Page Background alignment to Left.
Author
Would there be another or better way to address this?
Hello Guillermo
I would like to verify your page personally since I am not sure I understood the issue correctly.
Do you have any page where this still happens? I would like to verify it for you.
Let me know exactly on what page and how to reproduce the issue so that I might test it for you
Keep me posted here
Thank you
Stefano
Author
Hi Stefano,
Thanks for your help.
Should I upload my web page to something like: www.mydomain.com/test for you to have a look?
How can I send you the address privately?
Guillermo, yes, upload your site to the test folder and provide the link here.
If you do not want anyone other than Incomedia to try assist, go to your first post above and look for the red eye symbol next to the gear. Click it to make the thread private
Author
Hello,
I have uploaded the web site to:
https://www.guillermoalgora.com/test2
The problem I am having is that the header compensates when there is the scroll bar on the screen right side. For example, if you go from "BLOG" to "ABOUT" you will see that happening.
Thank you very much!
Guillermo, the problem is that you have content in the header (& footer at 480px) that is not within the viewable area. In step 2 Template Content You must ensure that every object fits within the viewable area (drag all 8 handles as necessary until the object fits)
. . . and you must do this for every resolution (blue arrows). Changes you make to object position or size will not affect other resolutions.
Same for footer
Author
Thanks for your help Esahc. I have checked and all my elements are withing the viewable area. I have deleted the unnecesary content and re uploaded to http://guillermoalgora.com/test3
Could be something else or somewhere else?
Guillerm, I have opened test3 on both my desktop and mobile, I can no longer see an issue. The menu remains rock solid (no movement) between menu selections.
Have you flushed the browser cache (CTRL+F5 on a desktop)?
At mobile resolution on the deskop the vertical side scrollbar does appear which causes a left jump for the header (it recenters), this in unavoidable when the page length suddenly becomes longer than the available display screen depth and 99% of users will never see this because they will start and finish on a tablet or mobile. Only desktop users who shrink the browser width will ever see this jump.
You may wish to left justify the menu and leave space before the right hand side so the menu does not move when the vertical scroll bar must be displayed.
Author
Hmm this is weird. I can still see the jump on test3. I have flushed the cache. It is strange because I am using Chrome on full screen and my resolution is 1920 x 1080. It does appear the scroll bar on the left hand side in "About" while in "Blog" there is not. I have uploaded pictures.
Left justify fixes the jump but I would love to have my webpage centered for the desktop users.
I am really puzzled.
I am taking this web site as reference: http://erwanleroy.com
if you go from "Blog" to "Training" the menu stays solid and on "Training" the scroll bar is disabled while for Blog is enabled.
Guillermo, i think you are referring to the scroll bar of the browser effectively changing the width of the browser window as dictated by whether it is required or not (& therefore altering the center of the page).
Assuming this is the case you could simply add enough content to each page to ensure that the vast majority of screens will not be deep enough to display the full length of the page and so the scroll bar will always appear.
As a workaround you could go to step 2, template structure, page content and set page length impossibly long (you would need to do this for every resolution!) and then the scroll bar on the browser would always be visible irrespective of the length of content (this will not be suitable if you intend to have a footer).
The alternative would be to use some code to permanently enable the scroll bar in the browser whether required or not (as would appear to be the case in the http://erwanleroy.com example provided) . I don't know how to do this and avoid code as much as possible (3rd party code is not supported by Incomedia either) but there is some discussion here https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page and I am sure you will find other possible solutions if you search with google.
Author
Thank you for your help Esahc, you have been very helpful. It is a pitty that Incomedia does not facilitate the use of code. Maybe this thing with the scroll bar could be a good addition to the software.
Unfortunately, I think If I may need a footer. I get to a fix using code or whatever I can find, I will post it here.
Again, many thanks!