WebSite X5Help Center

 
Guillermo A.
Guillermo A.
User

Header moves depending on page vertical length  en

Autore: Guillermo A.
Visite 1140, Followers 1, Condiviso 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!

Postato il
12 RISPOSTE - 1 UTILE
Guillermo A.
Guillermo A.
User
Autore

I think I succeded by setting the Page Background alignment to Left. 

Leggi di più
Postato il da Guillermo A.
Guillermo A.
Guillermo A.
User
Autore

Would there be another or better way to address this?

Leggi di più
Postato il da Guillermo A.
Incomedia
Stefano G.
Incomedia

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

Leggi di più
Postato il da Stefano G.
Guillermo A.
Guillermo A.
User
Autore

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?

Leggi di più
Postato il da Guillermo A.
Esahc ..
Esahc ..
Moderator

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

Leggi di più
Postato il da Esahc ..
Guillermo A.
Guillermo A.
User
Autore

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!

Leggi di più
Postato il da Guillermo A.
Esahc ..
Esahc ..
Moderator

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

Leggi di più
Postato il da Esahc ..
Guillermo A.
Guillermo A.
User
Autore

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?

Leggi di più
Postato il da Guillermo A.
Esahc ..
Esahc ..
Moderator

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.

Leggi di più
Postato il da Esahc ..
Guillermo A.
Guillermo A.
User
Autore

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.

Leggi di più
Postato il da Guillermo A.
Esahc ..
Esahc ..
Moderator

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.

Leggi di più
Postato il da Esahc ..
Guillermo A.
Guillermo A.
User
Autore

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!

Leggi di più
Postato il da Guillermo A.