layout jumps
Hi there,
Here's my WIP site: http://gatehouse-design.com/bostonpartners/ p:bostongatehouse
I'm seeing a layout jump when you navigate between home and insights. The logo moves vertically which I think is caused by the class "scale-with-grid" and the layout moves horizontally which is definitely caused by "nice-scroll".
I don't want any movement of the core layout elements when you navigate around the site.
To fix the nice-scroll issue why not add it to all pages then none will jump?
To fix the logo movement vertically I don't know what to do. I deleted my child theme stylesheet and see the same issue so it's not due to a page-specific style I've added. I can also replicate the issue on your demo http://themes.muffingroup.com/be/tourist/ you see if when you switch between home and news.
What are your thoughts. I don't want to present to my client with a jumping layout.
Thanks,
Alice
Here's my WIP site: http://gatehouse-design.com/bostonpartners/ p:bostongatehouse
I'm seeing a layout jump when you navigate between home and insights. The logo moves vertically which I think is caused by the class "scale-with-grid" and the layout moves horizontally which is definitely caused by "nice-scroll".
I don't want any movement of the core layout elements when you navigate around the site.
To fix the nice-scroll issue why not add it to all pages then none will jump?
To fix the logo movement vertically I don't know what to do. I deleted my child theme stylesheet and see the same issue so it's not due to a page-specific style I've added. I can also replicate the issue on your demo http://themes.muffingroup.com/be/tourist/ you see if when you switch between home and news.
What are your thoughts. I don't want to present to my client with a jumping layout.
Thanks,
Alice
Comments
this happen because of h1. On homepage you don`t have h1 in subheader but on inner pages you got it. And this can`t be unfortunately done as you want.
However we can only give you css that will work in your case and this should help you a lot:
#Top_bar .logo { height: 130px; }#Top_bar .logo:not(.text-logo) h1 { font-size: 16px; }