problem with custom burger position

[qua7]

I use an overlay menu and created a custom position for the burger (and the close x) with the following CSS:

.overlay-burger {
position: fixed !important;
padding-top: 30px !important;
padding-right: 5% !important;
}
.overlay-close {
position: fixed !important;
padding-top: 30px !important;
padding-right: 5% !important;
}

When navigating to a page, the burger is shown in the correct spot. But when navigating to a project, the burger moves a bit to the right (I guess that is it's default spot). When I refresh the project or when I go to the project directly (not coming from a link), then the burger is in the correct spot.

Guess this has something to do with Ajax? How can I fix this?

[arminunruh]

Hmm, not sure what's happening here. Do you have a link?

[qua7]

It is only a draft: https://corporatefotografie.com

If you go from homepage to Architekturfotografie and then back to Homepage you can see the burger jumping to the right and then back to the correct position. Strangely enough this only happens on my MacBook Pro and my Mac Studio, but not on my iPad.

[arminunruh]

do you think maybe the burger moves around because on some pages you have a scrollbar and on others you dont?

[qua7]

This was just a coincidence: the pages had no scrollbar. I tested now with a page (info) that has a scrollbar: burger is ok. So the problem with moving burger only occurs when navigating to a project.

[arminunruh]

yea!

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html, body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

this would hide any scrollbars

[qua7]

thanks, @arminunruh. But why should I want to hide the scrollbar? Scrollbars are normal and useful, I don't have a problem with the scrollbar (at least I think so), but with the jumping burger.

[arminunruh]

because then the burger won't jump!
i think its the only way to make it not jump.

[qua7]

@arminunruh I still don't think so. The burger does not jump when navigating to a page (like this page: https://corporatefotografie.com/info/ - although it does have a scrollbar in this test version). The burger only jumps when navigating to a project (like this project: https://corporatefotografie.com/industriefotografie/ - which does not have a scrollbar because a deleted the content now to make my point).

[arminunruh]

which browser do you use?
and which operating system, windows or mac?

im on chrome on a macbook and for me they have the same position

[qua7]

I'm on Mac. It happens on my Macbook with Safari, Chrome, Firefox and Opera. It happens sometimes (but not all times) with the same browsers on my Mac Studio. It does not happen on iPad.

Did you just click the links from here? Then you won't see the problem. It only shows when navigating inside my site (for example between homepage and a project).

Here's a screen recording: https://dagmarschwelle.com/burger.mov

[arminunruh]

ah i understand now, thanks for the clarifications!

could you update lay theme now and see if its fixed?

[qua7]

thanks a lot @arminunruh! Now there is a barely visible jump in the opposite direction, nothing I would worry about, for me it is ok like that. But only for you to know if that's of interest for your code.

[arminunruh]

yea i see. i checked my code, i think thats as good as i can make it work :O

[qua7]

it is good enough. in a good way. Thanks @arminunruh