Navbar moves

asbjornflo · August 19, 2019, 6:01pm

When switching between these two pages, the navbar moves:
this one with an image:
http://wwwlol.asbjornflo.net/trees-which-from-dropped-leaf/
this one without an image:
http://wwwlol.asbjornflo.net/artikler-2/
Is there a way with to avoid this?

nabeel · August 20, 2019, 7:03pm

Hi Osbourne,

Thank you for reaching out to us;. I checked both pages by opening them in separate tabs and switching between them and your Navbar doesn’t move on my end.

Can you please share a video recording of the issue you’re having so we can take a closer look?

Thanks!

asbjornflo · August 20, 2019, 3:07pm

I checked it out a bit more. It only happens under certain screen resolution. with 1280x800 and 720p it does not happen, but with for instance 1680x1050, 1080p, 1080i and 3840x2160 it does happen. Both with hdmi and vga.

It also happens when switching between these two pages:
http://wwwlol.asbjornflo.net/tregridtest-4/
http://wwwlol.asbjornflo.net/two-columns-2/

nabeel · August 20, 2019, 9:18pm

Hey Osbourne,

I tried on multiple resolutions and couldn’t replicate the issue on my end, however I noticed there is a flickering in the navigation menu when the page loads, maybe this is what you’re referring to, if that’s the case then try adding the following code in the Theme Options > CSS:

.x-navbar .desktop .x-nav li.wpml-ls-item>a>span {
    position: relative;
}
.x-navbar .desktop .x-nav li.wpml-ls-item>a>span:after {
    position: absolute;
}

If this doesn’t resolve the issue then please provide the video recording of the issue so we can take a closer look,

Thanks!

asbjornflo · August 21, 2019, 12:34pm

I tried what you sent me but it did not work, it just moved the menus a bit.

Here is a video:
http://asbjornflo.net/temp_webbug/

It happens when you have an external monitor, not on a small laptop monitor.

I’ve tried three different external monitors with various sizes and resolutions (1280x800, 720p, 1680x1050, 1080p, 1080i and 3840x2160), both with hdmi and vga, as well as two different laptops (resolution 1280x800 and 4K), both MacOS and Windows.

It happens when you switch between these:
http://wwwlol.asbjornflo.net/tregridtest-4/
http://wwwlol.asbjornflo.net

jade · August 21, 2019, 4:27pm

Hi Osbourne,

I checked your site and it seems that the site content moves when there is a scroll bar on the current page and the next page you open does not have it and vice versa.

What you can try to do is to add a min-height to the entire page of your site so that regardless of the volume of the content in every page so that there will be scrollbars in every page.

Please try this code in X > Theme Options > CSS:

#top {
    min-height: 101vh;
}

Hope this helps.

asbjornflo · August 21, 2019, 7:55pm

Hi,

This works.
It is kind of a hack, and I would prefer to not have it there. Is there another way?
Anyway, I highly appreciate your help.
Thanks!

Osbourne

benursal · August 22, 2019, 1:13am

Hi Osbourne,

It’s a customized solution for this particular situation rather than a hack.

asbjornflo · August 22, 2019, 11:47am

OK. I really appreciate your help. Thanks!

jade · August 22, 2019, 1:18pm

Hi Osbourne,

The solution I provided if necessary for your site because there are some pages have a small amount of content that is why the browser does not have a scroll bar while some pages have because the content are long enough for the browser to have a scroll bar.

So it could either be you will get rid of the scroll bar throughout the site which will cause an issue because you will not be able to scroll for the contents that are pass the browser height. That is why the solution I provided is to set a minimum height to the content area so that there will be a scroll bar on all pages so that the content area will not look like it changes its width.

Hope this explains it.

system · September 1, 2019, 1:19pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.