Burger appearing on the wrong side of navigation inbetween full width and mobile version

Site URL: https://ladybug-chicken-2tp4.squarespace.com/

Hi all,

At the moment my Burger  is appearing on the wrong side of page inbetween full width and mobile version

we have the widescreen state which is the standard desktop (where nav is visible) which is fine and the mobile state which is also fine (both with a green tick under the image)

However, in between these widths, so when desktop view is in too small of a width to fit the navigation items in, it reverts to the burger (which is correct) but the burger is on the left of the screen rather than the right (not how i would like it). When the site is in this responsive width id like the burger to be on the right of the page please.

If you squidge the window down slowly you will see what i mean, ive shown in pictures here.

Thanks so much for your help and expertise!

Jack

Site password:
*3iRgpCKJ-8@bBZ7

Hi,

Which screen size problem appear? We can try some code to fix it

Hello @tuanphan

It occurs around 1200px

Any help would be amazing.

The site password has changed to ._ufVWnJzxeqghto_Q!n8H7_

Thanks so much for your time and help

Use this CSS

/* Fix burger position */
.header-display-desktop {
    flex-direction: row-reverse;
}